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

2014-06-18

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

Bootstrap3 Tooltipの使い方

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

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

Class名	概要
`data-toggle="tooltip"`	要素をツールチップとして機能させる
`data-placement="top"`	ツールチップの出てくる位置を決める、左右、上下の４つから選ぶ
`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);
});

デモページはこちら