ツールチップは、案外簡単に実現することが出来ました！

HTML・CSSソース

a要素にtooltipクラスを付け、表示させる内容をspan要素のtooltipContクラスに記述します。
CSSソースはtooltipContクラスの「display:none」「position:absolute」と「z-index」が必須で、表示の装飾は任意で行って下さい。
[sourcecode language=’html’]
サンプルテキストツールチップで表示される内容
[/sourcecode]

[sourcecode language=’css’]
.tooltipCont {
display: none;
position: absolute;
z-index: 100;
padding: .5em;
background: #cef3ff;
font-size: 80%;
color: #000;
text-decoration: none;
}
[/sourcecode]

Javascriptソース

[sourcecode language=’javascript’]
$(function(){
//各tooltipクラスの動作設定
$(“a.tooltip”).each(function(){
var content = $(“.tooltipCont” , this);

//mousemoveイベントの動作設定
$(this).mousemove(function(event){
$(content).css({
top : event.pageY + 15,
left : event.pageX + 15
});
});

//hoverイベントの動作設定
$(this).hover(function(){
$(content).stop(true , true).fadeIn(300);
}, function(){
$(content).css(“display” , “none”);
});

});

});
[/sourcecode]

Javascriptソースの解説

4行目

tooltipクラス内のtooltipContクラスを取得しています。

7 – 12行目

マウスのポインターからのtopとleft位置を取得しています。

15 – 19行目

16行目でtooltipContクラスを表示させています。
stop(true , true)を記述することで、アニメーションをループさせないようにしています。

サンプル

こちらのサンプルでは、画像表示もさせています。

1. Web-Parkのホーム > 
2. Javascript > 
3. jQueryで作るマウスに追随するツールチップ