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>

CSS

<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。