jQuery Tooltip plugin の基本的な使い方メモ

jQuery Plugins: Tooltip (jquery.tooltip.js)

このデモページのように、テキスト等にマウスを乗せると噴出しを表示させる事が出来るようになる便利プラグイン。配布元のサイトにもドキュメンテーションはあるものの、すぐに使い始めてみたいヒトや頻繁に再利用したいヒト (自分) の為に最低限必要な要素をまとめたサンプルページをここに置いておきます。

jQuery Tooltip プラグイン サンプルページ

解説

必要な javascript ファイル

jquery.js

jQuery本体。 [link]

jquery.dimensions.js

DOM要素の表示系情報 (x/y座標, width, height) をjQuery で扱う為のプラグイン。 [link]

jquery.tooltip.js

Tooltip プラグイン本体。 [link]

必要な CSS Style 設定

以下の css 設定にする事で、カスタマイズが容易な基本レイアウトになります:

#tooltip {
    position:   absolute;
    width:      12em;
    background: #999;
    padding:    10px;
}
#tooltip h3, #tooltip div {
    font-size:   1em;
    font-weight: normal;
    margin:      0;
}

#tooltip > width で噴出しの横幅を設定できるので、お好みで。

噴出しを表示させたいHTML要素の準備

title属性にテキストを格納しておく事で、tooltip pluginがそれを噴出しにして表示してくれます。

<a href="hoge.html" title="my tooltip text">link</a>

<span class="memo" title="some text">メモ書き</span>

今のところ、噴出しで表示可能なのはテキストのみっぽい。

最後に javascript にて噴出しを作成

$().Tooltip() メソッドを実行する事により、マウスオーバー時に噴出しが表示されるようになります。

$( 'a' ).Tooltip();
$( 'span.memo' ).Tooltip();

引数にいろいろ渡す事で、噴出しごとに挙動を変える事も可能な模様。詳しくはドキュメントを参照。

関連情報

その他の Tooltip/噴出し系 jQuery Plugin:

• jTip
• clueTip
• leviTip