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属性からの動作も可能ですが。)

こんな感じですが何かの際には是非。。。