今回のTooltipは、吹き出しの形で表示されるものです。
画像が準備されているので、カスタマイズは大変かもしれませんが、
（改変する場合は、GNU ver2のルールに従う必要があります。）
ちょっと変わった吹き出しTooltipを簡単に導入できます。
[Ballom tooltip]
http://www.dhtmlgoodies.com/index.html?whichScript=bubble_tooltip
◆dhtmlgoodies.comには、大量にScriptがあります。ワクワクしてきます。
[ダウンロードと設定]
Ballom tooltipの[ You can download the script from this Zip file ]リンクから
Zipファイルをダウンロードします。（ファイル名はbubble-tooltip.zip）
解凍すると、cssファイルフォルダ、jsファイルフォルダ、imageファイルフォルダがあります。
（その他、サンプルhtmlとライセンスドキュメントがあります。）
各フォルダを適当な場所にアップしたら、
適用させるhtmlファイルにCSSとJavaScriptを宣言します。
imagesフォルダは、CSSファイルから読み込むので、
パスの相対関係やフォルダ名変えずにアップします。//JavaScript
<script type="text/javascript" src="xxxxxx/bubble-tooltip/js/bubble-tooltip.js"></script>
// CSS
<link rel="stylesheet" href="xxxxxx/bubble-tooltip/css/bubble-tooltip.css" type="text/css" media="screen" />
[実装方法]
非常にシンプルです。
まず、htmlファイルのどこかに、Tooltip生成用のdiv要素を準備しておきます。
これは、CSSで制御されており実際に表示されることはありません。<div id="bubble_tooltip">
<div class="bubble_top"><span></span></div>
<div class="bubble_middle"><span id="bubble_tooltip_content"></span></div>
<div class="bubble_bottom"></div>
</div>
次に、吹き出しを表示させたい要素で、
マウスオーバーイベントで表示用functionを呼び出し、
マウスアウト時に非表示用functionを呼び出します。
※DemoではonMouseMoveイベントでfunctionを実行しているのですが、
ブログの環境上、うまく表示されないため、onMouseOverイベントで実行させています。<a href="#" onMouseOver="showToolTip(event,'吹き出しに表示させる文字。');return false" onMouseOut="hideToolTip()">Sample Link</a>次のリンクにマウスを当ててみてください。
aタグだけでなくsapnタグ、divタグでも利用可能です。
Tooltipが表示されることになります。
span タグの場合も同様に、Tooltipが表示されます。
今回ブログにこのTooptipを組み込んだのですが、
隠しdivブロックがhtml直下にあるという前提で吹き出しを表示させる位置計算がされているため、
ちょうどよい位置に吹き出しを表示させるためにプログラムを少し改造しました。
そのあたりの調整がブログなど固定サイトに組み込む場合は、少し苦労しそうです。