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

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:

Comments:3

pools 2007-12-15 (土) 22:42

コレいいですね。デモで確認したら、IEのselectタグと組み合わせても何の問題もなくtooltipが表示されました。
同じようなtooltipを実現するjsで、IEの場合にだけ表示したtooltipがプルダウンの裏にもぐっちゃう状態になって困ってました。

bashi 2007-12-17 (月) 00:08

そうそう、IEのその問題を解決するには本家デモページにあるように、bgiframe ってゆープラグインを追加で読み込ませておく必要があるよ。
http://plugins.jquery.com/project/bgiframe

koji 2009-02-28 (土) 10:03

初めまして、kojiといいます。
この記事大変参考になりました。
ありがとうございました。
気になったことが一つありました。
「このデモページ」のリンク先のパスが
「http://jquery.bassistance.de/tooltip/」となっています。
「demo/」が足りないのではないでしょうか。
わざとそうしているのでしたらごめんなさい。

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Remember personal info

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

Search
Feeds

Page Top