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