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