Webページ中のリンクや画像の上にマウスを重ねると表示されるツールチップ。HTMLタグにtitle属性を指定するだけで表示できるのでリンク先の内容や画像を紹介するのに便利ですが、デフォルトのツールチップだと見た目が素っ気ない。とはいえ、ツールチップの表示はWebブラウザーの機能なので、通常はWebサイト側ではデザインの変更などはできません。

　そこで、独自のツールチップを表示するJavaScriptライブラリーの出番です。ツールチップを表示するライブラリーはいくつかありますが、今回は比較的使いやすく多機能な「qTip」を紹介しましょう。

qTipとは

　「qTip」はクレイグ・トンプソン氏が開発しているライブラリーで、jQueryのプラグインとして動作します。本稿執筆時点の最新版は1.0.0-rc3で、jQuery 1.2.6以降に対応しています（jQuery 1.3以降を推奨）。qTipは以下のページからダウンロードできます。

　http://craigsworks.com/projects/qtip/download/

　通常は「Production」のチェックをオンにして、圧縮されたqTipをダウンロードするといいでしょう。また、jQueryを初めて使う場合は、jQuery本体も一緒にダウンロードできます。

qTipのダウンロードページ

（次ページ）qTipの基本的な使い方

ツイートする

この記事の編集者は以下の記事をオススメしています

• WordPressがTwitterふうのライフストリームに！

• 「WordPress 2.7」が登場間近、RC1が公開に

• 葛西区民館がWordPressに燃えた一日

• HTML5先取り！CanvasならFlash不要で絵が描ける

• 3分でできるJS＋CSS「角丸」テクニック

• jQueryでエクスプローラ風メニューに！

• 技術系サイトに必需品！ ソースコードは鮮やかに

• 長～いページもスッキリ！jQueryでタブ表示

関連記事

• iBooks AuthorでHTML5の電子書籍作ってみた

• HTML5のゲーム開発を効率化！国産ライブラリー

• PhoneGapでiPhoneのコンパスアプリを再現

はてブ注目ランキング

1. 50代でも分かったHTML5の基礎知識729 users

2. 10分でわかる！ jQuery Mobileのキホン94 users

3. iBooks AuthorでHTML5の電子書籍作ってみた76 users

4. HTML5要素のブラウザー実装状況を調べてみた38 users

5. 本店と楽天を使い分け、ブランディングを強化23 users

6. 40分で覚える！jQuery速習講座2210 users

7. 絶対見ておきたい有名企業のスマホサイトまとめ2135 users

8. もう配色には困らない！「Adobe Kuler」1681 users

9. 30分でできる！Webサイトを高速化する6大原則1496 users

10. Web制作会社が作った！超使えるJavaScriptライブラリ1215 users

最新記事

• スカパー！HD内蔵レコーダー シャープBD-W1000は捗るぞ！

  

• 大画面スマートフォンの操作感を徹底比較

  

• NASやオンラインサービスでスマホのストレージを大増量だ！

  

• iPhoneイヤフォン最初に買うならこの1本！

  

• GPU黒歴史 2Dから3Dへの移行期に生まれた鬼子 Matrox m3D