jqueryで作る簡単なツールチップ
プラグインとか使いたく無かったのでゴリゴリと、、、
script
<script type="text/javascript"> $(function() { $('.tooltip').css('display', 'none'); $('.set_tooltip').mouseover(function(event){ var x = event.pageX - 10; var y = event.pageY + 10; $(event.target).children().css('display', 'block').css('left', x).css('top', y).fadeTo('nomal', 0.9); }); $('.set_tooltip').mouseout(function(event){ $(event.target).children().css('display', 'none'); }); }); </script>
html
<table> <tr> <th>A</th> <th>B</th> <th>C</th> </tr> <tr> <td class="set_tooltip">1<div class="tooltip">ほげ</div></td> <td class="set_tooltip">2<div class="tooltip">ほげ</div></td> <td class="set_tooltip">3<div class="tooltip">ほげ</div></td> </tr> </table>
<style type="text/css"> .tooltip { background-color: #FFFFFF; padding: 3px 5px; border: 1px solid #696969; font-size: 0.8em; position: absolute; } </style>
set_tooltipクラスのつけられた要素にカーソルを合わせた時に、
子要素にtooltipクラスの要素があればその中身を表示。
上記の例だと table と div を使っていますが、
親子関係が同じなら span でも p でもスクリプトはコピペで動きます。
ツールチップ内でのタグの使用も当然OK。