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