Bootstrap3 Tooltipsの簡単な使い方

Pocket

bootstrap3のtooltips使い方
ツールチップはマウスオーバーで注意事項を表示したり、フォームの入力時にヘルプを表示したりする場合によく使います。

Bootstrap3のTooltipsでは簡単にこれらのツールチップ機能を実装できます。もちろんテキストだけでなく、アイコンやボタンのマウスオーバーにも対応しているので、活用の場所は広いです。

ではさっそくBootstrap3のTooltipsとtooltip.jsの使い方を紹介します。

Bootstrap3のTooltipsの使い方

Tooltipsの基本的な使い方

Tooltipsは表示させたい場所のタグに属性を追加し、そのid名でjavascriptの設定を行えば使えるようになります。

<!-- aタグ -->
<a id="tooltip-sample1" href="#" data-toggle="tooltip" title="Tooltip!">
  Tooltip!
</a>

<!-- buttonタグ -->
<button id="tooltip-sample2" type="button" class="btn btn-default" data-toggle="tooltip" title="Button!">
  Button Tips
</button>

<!-- pタグ内のstrong -->

Lorem ipsum dolor sit <strong id="tooltip-sample3" data-toggle="tooltip" title="Strong!">amet</strong>, consectetur  adipisicing elit.

<!-- アイコン -->
<i class="fa fa-question-circle" id="tooltip-sample4" data-toggle="tooltip" data-placement="right" title="Icon!"></i>

//Tooltipの有効化
$('#tooltip-sample1').tooltip();
$('#tooltip-sample2').tooltip();
$('#tooltip-sample3').tooltip();
$('#tooltip-sample4').tooltip();

4つめの例でアイコンのところに入れたように、data-placementを指定すると上下左右好きなところに表示することができます。

デモページ

tooltip.jsの使い方

通常は上記のような使い方で十分対応できると思いますが、Bootstrap3ではdata属性を使うことで様々な設定を行うことができます。

  • animation:フェードインアニメーションを有効にするかどうか
  • html:TooltipにHTMLを入れるかどうか
  • placement:表示場所の選択
  • title:表示する文字の指定
  • trigger:表示条件をhvoer,click,focus,manualから選択
  • delay:表示スピード
<!-- tooltip.js -->
<button class="btn btn-primary" id="tooltip-sample5" data-toggle="tooltip">
  tooltip.js
</button>

<!-- javascript -->
$('#tooltip-sample5').tooltip({
  animation : false,
  placement : 'right',
  title     : 'Tooltip5 title',
  trigger   : 'click'
});

tooltip.jsにはメソッドが用意されています。たとえばフォーム入力のエラー処理と合わせて、ヘルプテキストを入れたツールチップを表示するという使い方もできそうです。

  • .tooltip(‘show’):表示
  • .tooltip(‘hide’):非表示
  • .tooltip(‘toggle’):出したり消したり
  • .tooltip(‘destroy’):削除?

また、Tooltipsが出たり消えたりしたときのイベントハンドラも用意されています。

  • show.bs.tooltip:showが呼ばれたとき発動
  • shown.bs.tooltip:showが終わったら発動
  • hide.bs.tooltip:hideが呼ばれたら発動
  • hidden.bs.tooltip:hideが終わったら発動

//使用例
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

デモページ