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