JavaScriptでTooltipを実装する。(3) -bubble-tooltip.js

今回の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>

次のリンクにマウスを当ててみてください。

Sample Link

aタグだけでなくsapnタグ、divタグでも利用可能です。

ブロック領域の場合は、その領域のどこにマウスを当てても
Tooltipが表示されることになります。

span タグの場合も同様に、Tooltipが表示されます。

今回ブログにこのTooptipを組み込んだのですが、
隠しdivブロックがhtml直下にあるという前提で吹き出しを表示させる位置計算がされているため、
ちょうどよい位置に吹き出しを表示させるためにプログラムを少し改造しました。
そのあたりの調整がブログなど固定サイトに組み込む場合は、少し苦労しそうです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください