contentオプション
ポップオーバー（popover.js）におけるcontentオプションは、ポップオーバーの内容を指定するオプション。
属性値一覧表
| 属性値 | 説明 |
|---|---|
| 文字列 | ポップオーバーの内容を文字列で指定。 |
| function | ポップオーバーの内容を関数で指定。 |
data-content属性に指定
ポップオーバーを呼び出す要素に、data-content属性を追加し、文字列を指定する。
サンプル
ソースコード
HTML
<p>
<button type="button" class="btn btn-default" data-toggle="popover" title="ポップオーバーのタイトル" data-content="data-content属性で指定したポップオーバーの内容。">サンプル・ボタン</button>
</p>
JavaScript
$(function () {
$('[data-toggle="popover"]').popover();
});
JavaScriptにおいてcontentオプションを指定
サンプル
ソースコード
HTML
<p> <button type="button" id="sample3popover1" class="btn btn-default" title="ポップオーバーのタイトル">サンプル・ボタン</button> </p>
JavaScript
$(function () {
$('#sample3popover1').popover(
{
content: 'JavaScriptのcontentオプションで指定したポップオーバーの内容。'
}
);
});
JavaScriptにおいてcontentオプションに関数を指定
サンプル
ソースコード
HTML
<p> <button type="button" id="sample4popover1" class="btn btn-default" title="ポップオーバーのタイトル">サンプル・ボタン</button> </p>
JavaScript
$(function () {
function sample4tooltipFn() {
return "関数からの戻り値。";
}
$('#sample4popover1').popover(
{
content: sample4tooltipFn()
}
);
});