jQueryのプラグインでツールチップ

jQuery「Beauty Tips」｜web creators 2009年6月

web creators 6月号の「Webデザイン スタイルアップ Tips」でも紹介されていますが、jQueryのプラグイン「Beauty Tips」は非常に使い勝手が良い。
スクリプトさえ組み込めば、手軽に見栄えの良いツールチップが表示できる。また、いろいろとカスタマイズできるので、サイトにあわせたツールチップを作成するコトができる。
これはとても重要なコトなので、かなりありがたい。

…という訳で、「Beauty Tips」のページからデータをダウンロードして、web creatorsに載っている通りに作ってみましたが、IEでは表示に不具合が出てしまった。何故？？？

まあ、サイトからダウンロードしたデモデータはきちんと表示できているので、ソースを調べてみると、IE用には他のスクリプトを読み込まないといけないようである。
その件については、コリスさんの「これ最強かものツールチップスクリプト -BeautyTips」というページを見ていただくと分かると思いますので、お読み下さい。

少し前置きが長くなりましたが、サンプルはこちら

↑このサンプルはこちらからダウンロードできます。

カスタマイズですが、サンプルのHTMLの16〜30行目付近を参考にしてみて下さい。
padding、widthは説明しなくても分かりますよね？
spikeLengthとspikeGirthは、吹き出しのくちばし部分の設定、
cornerRadiusは、角の丸さ、
fillは背景の設定で、RGBを0〜255で設定し、最後に不透明度を少数点で設定します。
strokeWidthとstrokeStyleは、枠線の太さと色、
cssStylesは、文字のスタイルを設定します。

ツールチップには、画像を入れたHTMLを表示させたり、いろいろな設定もありますので、是非「Beauty Tips」のページからデータをダウンロードして、色々試してみて下さい。