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