Tooltipを表示できる軽量のjQueryプラグイン「TipTip」

TipTipはシンプルでスタイリッシュなToolTipを表示する事ができるjQueryのプラグインです。

要素にマウスオーバーした際にToolTipを表示する事ができ、表示位置を上下左右から指定する事もできるようです。

ツールチップのデザインはすべてCSSで指定されているようですので、カスタマイズも簡単にできそうです。

詳しくは以下

使い方

使い方ですが、まずはjQueryとダウンロードしたTipTipプラグインを読み込みます。

<script src="jquery1.4.js"></script>
<script src="jquery.tipTip.js"></script>
<ink href="tipTip.css" rel="stylesheet" type="text/css" />

次にHEAD内で読み込んだプラグインの設定を行います。
ToolTipを表示させたいClassに対してプラグインを有効にします。
サンプルでは「someClass」という名前を指定しています。

<script>
//someClassにマウスオーバーするとToolTipを表示するように指定します。
$(".someClass").tipTip();
//ToolTipのオプションを指定。
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
</script>

最後にhtmlでToolTipを表示させたい要素にclassを指定します。

Curabitur dolor eros;

以上で設定は完了です。
実際にブラウザで動作を確認してみてください。

オプション

以下のオプションが設定可能になっています。

maxWidth

CSSのmax-widthプロパティを指定します。ここで最大横幅が決定します。

edgeOffset

マウスオーバーした要素からの距離を指定します。

delay

マウスオーバーしてからどれくらい後に表示させるかの時間を指定します。

fadeIn

フェードインする際のアルファを変化させる時間を調整します。

fadeOut

フェードアウトする際のアルファを変化させる時間を調整します。

enter

コールバック関数です。マウスオーバーする際に毎回実行されます。

exit

コールバック関数です。マウスアウトされる際に毎回実行されます。

動作環境

以下の環境で動作するようです。

• IE7 & IE8, Firefox, Safari, Opera, and Chrome.

IE6は対象外ですので、利用には注意してください。