jQueryプラグインのtooltipsterの使い方

2015.11.07

jQueryプラグインのtooltipsterの使い方

jQueryプラグインのtooltipsterの使い方です。

こちらよりダウンロードします。

jsファイルは一つですが、cssファイルがかなりあります。

まず全てプリロードします。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script src="../js/jquery.tooltipster.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/tooltipster.css" />

引数には空オブジェクトを指定し、セレクタにtooltipsterメソッドを実行します。

<script type="text/javascript">
$(function() {
$('.aaa').tooltipster({});
});
</script>

title属性で指定した文言が吹き出しとして表示されます。

<body>
<span class="aaa" title="吹き出し">マウスオーバー</span>
</body>

DEMO

空のオブジェクトに色々指定することで吹き出しの表示方法を変更することができます。

arrow:falseとすることにより、吹き出しの矢印を非表示にします。

position:rightとすることにより、吹き出しを右側に表示します。その他、left,top,bottom等も指定できます。(シングルクォーテーションで囲む必要があります)

<script type="text/javascript">
$(function() {
$('.aaa').tooltipster({
                       arrow:false,
                       position:'right'
                      });
});
</script>

DEMO

今まではマウスオーバーによってtitle属性で指定した文言が吹き出しが表示されました。

これをtrigger:’none’とすることによってマウスオーバーによる吹き出しを解除することができます。

content:~~~とすることによって~~~が表示されるようにできます。

セレクタ.tooltipster('show');

とすることによって表示することができるようになります。

試しにテキストボックスが3文字以下なら吹き出しを表示するようにします。

<script type="text/javascript">
$(function() {
  $('#a').tooltipster({
    arrow:false,
    position:'right',
    trigger:'none',
    content:'吹き出し！'
  });

  $('#a').focusout(function(){
    if($('#a').val().length <= 3) {
      $('#a').tooltipster('show');
    } else {
      $('#a').tooltipster('hide');
    }
  });
});
</script>

DEMO

コメント

タイトルとURLをコピーしました