ツールチップ tooltip.js
ツールチップを表示するJavaScript。
サンプル
サンプル・リンク ｜ サンプル・テキスト ｜
使い方
デフォルト
オプション一覧表
animationオプション
containerオプション
delayオプション
htmlオプション
placementオプション
selectorオプション
templateオプション
titleオプション
triggerオプション
viewportオプション
メソッド
イベント
使い方
ポイントは３つ。
- ツールチップを表示させたい要素の
data-toggle属性にtooltipを指定、title属性にツールチップの内容を指定する。 - ツールチップを表示する位置（上下左右）は、
data-placement属性で指定できる。 - 下記のようなJavaScriptコードで、自分で初期化する必要がある。
ソースコード
html
<p> <a href="#" data-toggle="tooltip" title="ツールチップ（デフォルト）">サンプル・リンク</a> ｜ <span data-toggle="tooltip" data-placement="bottom" title="ツールチップ（下）">サンプル・テキスト</span> ｜ <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="ツールチップ（左）">サンプル・ボタン</button> </p>
JavaScript
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});