templateオプション
ポップオーバー（popover.js）におけるtemplateオプションは、ポップオーバー用のHTMLテンプレートを、テンプレート規則に基づき指定するオプション。
属性値一覧表
| 属性値 | 説明 |
|---|---|
| 文字列 | ポップオーバー用のHTMLテンプレートを、テンプレート規則に基づき指定する。 |
'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
初期設定値。 |
テンプレート規則
title属性に指定したポップオーバーのタイトルは、popover-titleクラスの要素に格納する。data-content属性に指定したポップオーバーの内容は、popover-contentクラスの要素に格納する。popover-arrowクラスの要素は、ポップオーバー用の矢印となる。- 最も外側の要素の
class属性には、popoverを指定する必要がある。
data-template属性に指定
ポップオーバーを呼び出す要素に、data-template属性を追加し、HTMLタグでテンプレートを指定する。
サンプル
ソースコード
HTML
<p>
<button
type="button"
class="btn btn-default"
data-toggle="popover"
data-template='<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title" style="color: #ff0000; font-weight: bold;"></h3><div class="popover-content" style="color: #0000ff; font-style: italic;"></div></div>'
title='ポップオーバーのタイトル'
data-content='ポップオーバーの内容'
>
サンプル・ボタン
</button>
</p>
JavaScript
$(function () {
$('[data-toggle="popover"]').popover();
});
JavaScriptにおいてtemplateオプションを指定
サンプル
ソースコード
HTML
<p> <button type="button" id="sample3popover1" class="btn btn-default" title='ポップオーバーのタイトル' data-content='ポップオーバーの内容' > サンプル・ボタン </button> </p>
JavaScript
$(function () {
$('#sample3popover1').popover(
{
template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title" style="color: #ff0000; font-weight: bold;"></h3><div class="popover-content" style="color: #0000ff; font-style: italic;"></div></div>'
}
);
});