Bootstrap3 ツールチップとTooltip.jsの簡単な使い方

Pocket

ツールチップはマウスオーバーした際にヘルプを表示したりするためのツール。自力で実装しようとすると面倒ですが、Bootstrap3には簡単に使えるツールチップコンポーネントが用意されています。

Bootstrap3 Tooltipの使い方

ツールチップはテキストやボタン、アイコンなどどんな要素にも使うことができます。ツールチップを表示させたい要素に対して3つの属性を記述するだけ。

ツールチップを機能させるためにjavascriptを自分で書く必要があるので注意が必要です。これを書かないと、要素に属性入れてもツールチップは表示されません。

Class名 概要
data-toggle="tooltip" 要素をツールチップとして機能させる
data-placement="top" ツールチップの出てくる位置を決める、左右、上下の4つから選ぶ
title="ツールチップの内容" ツールチップの内容をtitleに書く
<!-- テキストにツールチップ -->
<p data-toggle="tooltip" data-placement="top" title="テキストにツールチップ">テキスト</p>

<!-- ボタンにツールチップ -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="ボタンにツールチップ">ボタン</button>

<!-- アイコンにツールチップ -->
<span class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right" title="アイコンにツールチップ"></span>
// ツールチップを機能させるには自分でjavascript書く必要あり
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
});

デモページはこちら

Tooltip.jsの使い方

Tooltipのオプション

ツールチップはオプションを書き換えることで設定を変更することができます。

option名 概要
animation フェードアニメーションの可否
container ツールチップを特定の要素に追加
delay 表示の遅延を指定
html ツールチップ内にHTMLを挿入、XSSに注意
placement ツールチップのポジションを指定
selector 初期化時にモーダルウィンドウを表示
template ツールチップのHTMLテンプレート
title デフォルトの内容をセット
trigger トリガーを設定
viewport ツールチップを表示できる要素を指定
// デフォルト設定
$('#myTooltip').tooltip({
  animation: true,
  container: false,
  delay: 0,
  html: false,
  placement: 'top',
  selector: false,
  template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
  title: '',
  trigger: 'hover focus',
  viewport: { selector: 'body', padding: 0 }
});

また、オプションはJavascriptだけでなくdata-属性としてHTML上に記述することもできます。

<!-- データ属性でオプション設定 -->
<p id="myTooltip" data-toggle="tooltip" data-animation="true" title="テキストにツールチップ">テキスト</p>

Tooltipを操作するコマンド

Tooltip.jsではオプションの他にツールチップを操作するメソッドが用意されています。この機能を使うことで、表示・非表示を独自に作成したイベントに紐付けることができます。

function名 概要
.tooltip('show') ツールチップを表示
.tooltip('hide') ツールチップを隠す
.tooltip('toggle') ツールチップを表示したり閉じたりする
.tooltip('destroy') 前のページを表示

また、各動作ごとにイベントハンドラも用意されています。動作の始まりや終わりで処理を追加したい時に使えます。

function名 概要
show.bs.tooltip ツールチップが呼び出されたら発動
shown.bs.tooltip ツールチップが表示されたら発動
hide.bs.tooltip hideメソッドが呼び出されたら発動
hidden.bs.tooltip ツールチップが隠れたら発動
inserted.bs.tooltip show.bs.tooltipの後、テンプレートが挿入されたら発動
// ツールチップが表示されたら発動
$('#tooltip-hint').on('shown.bs.tooltip', function () {
  // ツールチップ(ヒント)が表示されたら点数が減る
  var currentPoint = $('.tensuu').text();
  var newPoint = currentPoint - 10;
  $('.tensuu').text(newPoint);
});

デモページはこちら