このページの本文へ

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

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

文●藤本 壱

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

qTipをカスタマイズしてみよう

 qTipは非常に多機能なライブラリで、さまざまにカスタマイズできます。その中からいくつか、簡単なカスタマイズ方法を紹介しましょう。


●文字の代わりに画像を表示する

 以下のような手順で、ツールチップの中に画像などの任意のHTMLを表示できます。

  1. ツールチップを付ける要素から、title属性を削除します。
  2. qTipを実行する際に「content」というパラメータを指定して、ツールチップに表示するHTMLを指定します。contentパラメータにimgタグを入れれば、ツールチップに画像を表示できます。


$(document).ready(function() {
    $('#要素のID').qtip({
        content: ツールチップとして表示するHTML
    });
});



●スタイルの指定

 qTipに「style」というパラメータを指定して、ツールチップのデザインをカスタマイズできます。styleパラメータは、スタイルシートと似たような書き方ができます。

 また、styleパラメータに「tip」というパラメータを指定することで、ツールチップを吹き出し風に表示できます。


$(document).ready(function() {
    $('#要素のID').qtip({
        style: {
            tip: 吹き出しを付ける位置,
            プロパティ: 値,
            プロパティ: 値,
            ・・・
        }
    });
});


●ツールチップの位置の指定

 デフォルトではツールチップは対象の要素の右下に表示されますが、右上など好みの位置にも変更できます。その場合は、qTipに「position」というパラメータを指定します。


$(document).ready(function() {
    $('#要素のID').qtip({
        position: {
            corner: {
                target: 対象要素から見たツールチップの位置,
                tooltip: 対象要素と接するツールチップの角(辺)の位置
            }
        }
    });
});


 筆者のサイト(http://www.h-fj.com/ascii/qtip/sample2.html)に、カスタマイズのサンプルを公開しています。実際のコードは、このページのソースを参照してください。

カスタマイズの例

カスタマイズの例


qTipをさらにカスタマイズする

 ここまでで紹介した以外にも、qTipには以下のような機能があり、さまざまなカスタマイズができます。

  1. ツールチップの表示/消去時にフェードなどのエフェクトをかける
  2. ツールチップを一定時間表示し続けたり、対象要素をクリックしたりするまで表示し続けたりする
  3. ツールチップの内容をAjaxで動的に読み込む
  4. ツールチップの表示時などに独自の処理を追加する

 詳しいドキュメントはqTipのWebサイトに用意されています。qTipを使いこなして、好みのツールチップ作りにチャレンジしてみましょう。

前へ 1 2 3 次へ

Web Professionalトップへ

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