skuare.net

JavaScriptライブラリjQueryのサンプルを中心にWebサイト構築に役立つ情報を紹介

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

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

sponsors

使用方法 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」

前の記事:
次の記事:読み込み状況を表示するjQueryプラグイン「DEPreLoad.js」

あなたにはこちもお勧め!

jQuery プラグインまとめ!

JavaScript

read more

Column

read more