TinyTipはカスタマイズしやすいツールチップを実装することができるjQueryプラグインです。軽量で使い方も簡単なので気軽に取り入れることができます。シンプルなゆえに自由度の高いスタイルを適用できるツールチップです。
TinyTipの使い方
TinyTip.jsのデモは以下でチェックすることができます。
ホバーやクリックでツールチップを表示させることが可能です。
使い方はjQuery本体とtinytip.jsをhead内に読み込み、ツールチップを表示させるHTMLを記述していきます。
<p class="sample">サンプル</p>
あとはTinyTipのセッティングをすれば完了です。
$(function(){
$('.sample').tinytip({
tooltip : 'サンプルテキスト',
position : 'bottom',
animation : {
top : -10
},
fix : {
top: 10,
left: -5
},
speed : 100,
on : 'click',
off: 'click',
preventClose : true,
onLoad : function(e){
alert('サンプルテキスト');
}
});
});
オプションで表示させるテキストや位置、スピード、読み込み時のコールバックなどを設定することができます。
また、上記ではonとoffに「click」が指定されていますが、これはクリックすることでツールチップを表示・非表示させる設定になります。
デフォルトではonが「mouseenter」、offが「mouseleave」になっています。表示と非表示のイベントをクリックやホバーで使い分けたりすることもできるので便利ですね。
表示されるツールチップは単純にテキストだけになるので、あとは自分で自由にCSSでスタイリングしていくことができます。
予め決められたデザインではなく、自分でカスタマイズしたツールチップを使いたい方にはピッタリのプラグインですね。
