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)に、カスタマイズのサンプルを公開しています。実際のコードは、このページのソースを参照してください。
qTipをさらにカスタマイズする
ここまでで紹介した以外にも、qTipには以下のような機能があり、さまざまなカスタマイズができます。
- ツールチップの表示/消去時にフェードなどのエフェクトをかける
- ツールチップを一定時間表示し続けたり、対象要素をクリックしたりするまで表示し続けたりする
- ツールチップの内容をAjaxで動的に読み込む
- ツールチップの表示時などに独自の処理を追加する
詳しいドキュメントはqTipのWebサイトに用意されています。qTipを使いこなして、好みのツールチップ作りにチャレンジしてみましょう。