[JS]指定したタグやクラスにツールチップを実装するスクリプト -UniTip

Post on:2008年7月9日

sponsors

Unit Interactiveのエントリーから、指定したHTMLのタグやスタイルシートのクラスにツールチップを実装できるスクリプトです。

タグやクラスは複数の指定が可能で、「unitip.js」の先頭の方で指定することができます。
デフォルトでは下記のように「a」「img」要素にクラス「tip」が使用されている場合になっています。

<textarea name="code" class="html" cols="60" rows="5">
var uniTipTag = "a,img";
var uniTipClass = "tip";
</textarea>

var uniTipTag = "a,img";

var uniTipClass = "tip";

</textarea>

ツールチップ内のテキストは、各要素のtitle属性に記述します。

また、UniTipは同サイトで配布している「Unit PNG Fix」を併用することで、IE6の透過PNG画像の表示に対応します。
参考：超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix

ツールチップの色や形状などのデザインを変更する際は、imagesフォルダにあるPNG画像を変更します。

UniTipの動作環境は、IE 6+, FF2+, Safari, Operaとなっています。
Fx3だとY軸の座標がちょっとおかしくなってしまいました。Fx3だとなんか違うのかな、今度調べてみよっと。