jQueryを使ってのツールチップのライブラリはネット上にも山のようにありますが、
どうも理想と合ったものがなかったので
≫TITLE属性を利用した簡単ツールチップの作り方 jQuery編 :: 5509(+1)
を参考にさせてもらいあれこれ改修かけて作ってみました。
ソース内のtitle属性を利用してマウスオーバーでツールチップを出現させるタイプのもの。
まずは動作サンプルから（下はiframeなのでツールチップがちょっと欠ける場合があります。）
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
title属性に記述されている内容がツールチップ内に表示されます。
title属性にはある程度ソースを記述することも可能なので、
テキストの装飾や画像貼付けなども実現可能です。
スクリプトは以下の様な感じに。
◆SCRIPT ———————————————————–
$(function(){
$(“body *”).filter(function(){
return this.title && this.title.length > 0;
}).each(function(){
var self = $(this), title = self.attr(“title”);
self.mouseover(function(e){
$(this).attr(“title”,””);
$(“body”).append(“<div id=’ttp’>”+ title +”</div>”);
$(“#ttp”)
.css(“position”,”absolute”)
.css(“top”,(e.pageY) + 15 + “px”)
.css(“left”,(e.pageX) + 15 + “px”)
.css(“display”,”none”)
.css(“filter”,”alpha(opacity=85)”)
.css(“opacity”,”0.85″)
.show(“fast”)
}).mousemove(function(e){
$(this).attr(“title”,””);
$(“#ttp”)
.css(“top”,(e.pageY) + 15 + “px”)
.css(“left”,(e.pageX) + 15 + “px”)
}).mouseout(function(){
$(this).attr(“title”,title);
$(“#ttp”).remove();
});
});
});
——————————————————————–
マウスオーバーでツールチップ用の<div id=”ttp”>タグを生成しています。
ツールチップの装飾自体もjQuery側でCSSを記述していますが、
ここは別途CSSファイルを用意する形でも大丈夫。
出現方法は「show」で動きを付けていますが、
ここを「fadeIn」や「slideDown」とすることで別の演出をつけることも可。
もちろん:animeteを使用すれば複雑な動きも加えられます。
ツールチップの配置位置を指定している
——————————————————————–
.css(“top”,(e.pageY) + 15 + “px”)
.css(“left”,(e.pageX) + 15 + “px”)
——————————————————————–
はカーソルからの距離を意味していますが、
これを近づけてしまうとIE8で動作した際、
カーソルがツールチップの上に乗ってしまい、
マウスアウト状態と判断されチップが消えてしまうことが。。。
開始行で$(“body *”)としてあるのでページ内の全てのタグを対象として、
title属性が付いているものを選んでいます。
何かと使用することが多い「Thickbox」を同じページで組み込む際には
ここを
——————————————————————–
$(“body *:not(.thickbox)”).filter(function(){
——————————————————————–
とすれば、class=”thickbox”が付いているタグのtitle属性は対象外となります。
（Thickboxはname属性からの動作も可能ですが。）
こんな感じですが何かの際には是非。。。