使い勝手の良いツールチップをjQueryプラグインで実現する「TinyTip.js」

吹き出しのように説明を表示させるツールチップ。
よく使う機会もあるのではないでしょうか。 そんな時jQueryプラグインの「TinyTip」を候補とするのも良さそうです。
使い勝手の良いツールチップをjQueryプラグインで実現する「TinyTip.js」サンプル

使用方法 TinyTipからファイル一式をダウンロード。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="tinytip.js"></script>
<script>
$(document).ready(function(){
$('.class名').tinytip({
position : 'bottom', //position [top|bottom|left|right]
fix : {
top : -10,
left: +50
},
animation : {
top : +10,
left: -5,
},
speed : 100,
tooltip : $('.tooltip'), //"言葉"とすることも可能です。
});
});
</script>

あとはclassを対象に振れば完成です。
またtootipのところで文字ではなく、要素を指定した場合はそちらも用意する必要があります。
<a href="http://www.yahoo.co.jp" class="class名">ツールチップ</a>
<p class="tooltip">ツールチップの中身</p>

使い勝手の良いツールチップをjQueryプラグインで実現する「TinyTip.js」サンプル

sponsors

「使い勝手の良いツールチップをjQueryプラグインで実現する「TinyTip.js」」をシェアする

記事作成:
記事URL:

TOP > > > 使い勝手の良いツールチップをjQueryプラグインで実現する「TinyTip.js」