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

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

文● 藤本壱

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

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

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

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

ツールチップを付ける要素から、title属性を削除します。
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）に、カスタマイズのサンプルを公開しています。実際のコードは、このページのソースを参照してください。