htmlオプション
ツールチップ（tooltip.js）におけるhtmlオプションは、ツールチップの内容においてhtmlタグを使いたい場合に使用するオプション。
XSS攻撃が心配な場合は、htmlオプションを使わず初期設定値のfalseのままにするか、falseを指定する。
属性値一覧表
| 属性値 | 説明 |
|---|---|
true |
ツールチップの内容におけるhtmlタグを有効化。
|
false |
ツールチップの内容におけるhtmlタグを無効化。初期設定値である。 |
data-html属性に指定
ツールチップを呼び出す要素に、data-html属性を追加し、trueかfalseの何れかを指定する。
サンプル
ソースコード
HTML
<p> <button type="button" class="btn btn-default" data-toggle="tooltip" data-html="true" title='ツールチップ<br><b style="color: #ffd800;">（data-html="true"）</b>' > サンプル・ボタン（true） </button> </p> <hr> <p> <button type="button" class="btn btn-default" data-toggle="tooltip" data-html="false" title='ツールチップ<br><b style="color: #ffd800;">（data-html="false"）</b>' > サンプル・ボタン（false） </button> </p> <hr> <p> <button type="button" class="btn btn-default" data-toggle="tooltip" title='ツールチップ<br><b style="color: #ffd800;">（指定なし）</b>' > サンプル・ボタン（指定なし） </button> </p>
JavaScript
$('[data-toggle="tooltip"]').tooltip();
JavaScriptにおいてhtmlオプションを指定
サンプル
ソースコード
HTML
<p> <button type="button" id="sample3tooltip1" class="btn btn-default" title='ツールチップ<br><b style="color: #ffd800;">（html: true）</b>' > サンプル・ボタン（true） </button> </p> <hr> <p> <button type="button" id="sample3tooltip2" class="btn btn-default" title='ツールチップ<br><b style="color: #ffd800;">（html: false）</b>' > サンプル・ボタン（false） </button> </p> <hr> <p> <button type="button" id="sample3tooltip3" class="btn btn-default" title='ツールチップ<br><b style="color: #ffd800;">（指定なし）</b>' > サンプル・ボタン（指定なし） </button> </p>
JavaScript
$('#sample3tooltip1').tooltip(
{
html: true
}
);
$('#sample3tooltip2').tooltip(
{
html: false
}
);
$('#sample3tooltip3').tooltip();