htmlオプション
ポップオーバー（popover.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="popover" 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="popover" 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="popover" title='ポップオーバー<br><b style="color: #ffd800;">（指定なし）</b>' > サンプル・ボタン（指定なし） </button> </p>
JavaScript
$(function () {
$('[data-toggle="popover"]').popover();
});
JavaScriptにおいてhtmlオプションを指定
サンプル
ソースコード
HTML
<p> <button type="button" id="sample3popover1" class="btn btn-default" title='ポップオーバー<br><b style="color: #ffd800;">（html: true）</b>' > サンプル・ボタン（true） </button> </p> <hr> <p> <button type="button" id="sample3popover2" class="btn btn-default" title='ポップオーバー<br><b style="color: #ffd800;">（html: false）</b>' > サンプル・ボタン（false） </button> </p> <hr> <p> <button type="button" id="sample3popover3" class="btn btn-default" title='ポップオーバー<br><b style="color: #ffd800;">（指定なし）</b>' > サンプル・ボタン（指定なし） </button> </p>
JavaScript
$(function () {
$('#sample3popover1').popover(
{
html: true
}
);
$('#sample3popover2').popover(
{
html: false
}
);
$('#sample3popover3').popover();
});