ツールチップとは、マウスカーソルを画像などにあてたときに表示される小さな矩形のことで、画像の場合はimgタグのalt属性に指定したテキストが表示されます。（IE7以前の場合。IE8からはalt属性ではツールチップが表示されなくなったようです。代わりにtitle属性を指定するとツールチップが表示されます。）
このツールチップに表示されるテキストをHTMLで自由にカスタマイズできるのがBeautyTipsです。下の画像にマウスカーソルをあててみてください。
| 通常のツールチップ |
BeautyTipsでカスタマイズした
ツールチップ |
 |
|
このようなカスタマイズを実現するために、まずは必要なJavaScriptファイルを入手します。上記サイトからリリース0.9.5-rc1をダウンロードします。
※上記サイトでは2012年7月現在、配布が中止されているようです。当サイトのhttp://una.soragoto.net/js/フォルダ内に下記の５つのJavaScriptファイルがあります。
ダウンロードしたzipファイルを解凍してできたbt-0.9.5-rc1_0フォルダの中の、以下の５つのJavaScriptファイルを取り出します。
| |
bt-0.9.5-rc1/other_libs/jquery-1.3.2.min.js |
|
bt-0.9.5-rc1/other_libs/jquery.hoverIntent.minified.js
|
|
bt-0.9.5-rc1/other_libs/bgiframe_2.1.1/jquery.bgiframe.min.js
|
|
bt-0.9.5-rc1/other_libs/excanvas_r3/excanvas.js
|
|
bt-0.9.5-rc1/jquery.bt.min.js
|
これらのJavaScriptファイルを、ツールチップを表示するHTMLファイルの<head>タグ内にインクルードします。具体的には下記のように記述します（JavaScriptファイル名およびパスは適宜変更してください）。
|
<script src="/xxxxx.js" type="text/javascript" charset="utf-8"></script>
|
これで必要なライブラリが揃い、準備が整いました。
次の手順は、ツールチップを表示させたい画像にid属性を指定することと、そのid属性の値に対応するJavaScriptを記述するということです。
例えば、下のフェレットの画像にはid="una"と指定しました。
| <img src="/img/una.jpg" id="una" alt="ウナ" /> |
このid属性の値「una」に対して右下のようなスクリプトを作成し、UTF-8でJavaScriptファイルとして保存します。
保存したファイルを、ツールチップを表示するHTMLファイルの末尾（</body>タグの直前）にインクルードします。
記述するJavaScriptは次のような書式となっています。
$('#id属性の値').bt('ツールチップに表示したいHTML',
{オプション１:値１, オプション２:値２}); |
簡単にオプションの説明をしますと、「trigger」には、ツールチップを表示するトリガーとなるイベントを指定します。
「positions」には、ツールチップを表示する位置（「top」（上）、「bottom」（下）、「right」（右）、「left」（左））を指定します。
「fill」には、ツールチップの背景色を「rgba」で指定します。「rgba」とは「red」、「green」、「blue」、「alpha」の頭文字で、「赤」、「緑」、「青」の色の強さを「0〜255」の数値で、「透明度」を「0〜1」の数字で（0:完全に透けている、0.5:半透明、1:完全に透けていないなど）指定します。
また「width」には、ツールチップの幅を指定します。
JavaScriptの書式は上記以外にも数種類あり、オプションの種類もたくさんあります。
詳しい説明はこちらをご覧ください（ただし英語です）。
|
|
