このページの本文へ

jQueryプラグイン「qTip」で作る

JavaScriptで画像付きツールチップをカスタマイズ!

2009年06月24日 14時00分更新

藤本 壱

  • この記事をはてなブックマークに追加
本文印刷

 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のダウンロードページ

(次ページ)qTipの基本的な使い方

Web Professionalトップページバナー

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

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く