ツールチップはマウスオーバーした際にヘルプを表示したりするためのツール。自力で実装しようとすると面倒ですが、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);
});