使い勝手の良いツールチップを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>
  

サンプル

ツールチップです

ツールチップです


Javascriptサンプルページ一覧
skuare.net

sponsors