【JavaScript】ツールチップ(tooltip)を表示するjQueryプラグイン

マウスオーバーしたときに説明文をカッコよく表示したくて調べたメモ。いわゆるツールチップ(吹き出し、ポップアップと呼ぶ人もいるが)。

jQueryのプラグインで簡単に表示できるのを見つけたので紹介。下記サイトに他のプラグインも含め紹介されている。

30 Stylish jQuery Tooltip Plugins For Catchy Designs


 jQuery Tools - Tooltip

ライセンス:NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE(著作権もライセンスもない。あなたの好きなようにして)

jQuery Toolsの一部。オプションが豊富で、ドキュメントもしっかりしているので使いやすい。drop shadow付きでカッコイイのが簡単に作れる。迷ったらこれ。

image


jQuery Tooltip Plugin

ライセンス:MIT/GPL

デモを見るのが分かりやすい。使い方もシンプル。

image


qTip

ライセンス:MIT

多機能なツールチップを実装できる。デモ。callbackのイベントも用意されているので、ツールチップの動作に合わせてカスタマイズできる。ツールチップに表示したHTMLをクリックしたりとかポップアップ(ダイアログ)的な使い方もできる。

image


jQuery UI

ライセンス:MIT/GPL

まだ未実装。バージョン1.9で実装される予定なので一応メモ。ユーザーインターフェース部分はjQuery UIに統一していきたい。

 

<関連記事>

jQueryとjQuery UIのバージョンを確認(Google CDNを使う)