triggerオプション
ツールチップ（tooltip.js）におけるtriggerオプションは、ツールチップを呼び出すイベントを指定するオプション。
クリックでツールチップを呼び出すようにすることなどができる。
属性値一覧表
複数の属性値を指定する場合は、hover focusのように半角スペースで区切る。
初期設定値は、hover focusである。
| 属性値 | 説明 |
|---|---|
click |
クリック時にツールチップを呼び出す。 |
hover |
マウスオーバー（マウスホバー）時にツールチップを呼び出す。 |
focus |
フォーカス時にツールチップを呼び出す。 |
manual |
ツールチップを自前の方法で呼び出す場合に指定する。 |
data-trigger属性に指定
ツールチップを呼び出す要素に、data-trigger属性を追加し、ツールチップを呼び出すイベントを指定する。
サンプル
ソースコード
HTML
<button type="button" class="btn btn-default" data-toggle="tooltip" data-trigger="click" title="ツールチップ">サンプル・ボタン click</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-trigger="hover" title="ツールチップ">サンプル・ボタン hover</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-trigger="focus" title="ツールチップ">サンプル・ボタン focus</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-trigger="manual" title="ツールチップ">サンプル・ボタン manual</button>
JavaScript
$('[data-toggle="tooltip"]').tooltip();
JavaScriptにおいてtriggerオプションを指定
サンプル
ソースコード
HTML
<button type="button" id="sample3tooltip1" class="btn btn-default" title="ツールチップ">サンプル・ボタン click</button> <button type="button" id="sample3tooltip2" class="btn btn-default" title="ツールチップ">サンプル・ボタン hover</button> <button type="button" id="sample3tooltip3" class="btn btn-default" title="ツールチップ">サンプル・ボタン focus</button> <button type="button" id="sample3tooltip4" class="btn btn-default" title="ツールチップ">サンプル・ボタン manual</button>
JavaScript
$('#sample3tooltip1').tooltip(
{
trigger: 'click'
}
);
$('#sample3tooltip2').tooltip(
{
trigger: 'hover'
}
);
$('#sample3tooltip3').tooltip(
{
trigger: 'focus'
}
);
$('#sample3tooltip4')
.tooltip(
{
trigger: 'manual'
}
)
.on(
'mouseenter',
function() {
$(this).tooltip('show');
}
)
.on(
'mouseleave',
function() {
$(this).tooltip('hide');
}
);