delayオプション
ポップオーバー（popover.js）におけるdelayオプションは、ポップオーバーを表示するまでの時間と、非表示にするまでの時間を、設定するオプション。初期設定値は、０ミリ秒である。
属性値一覧表
data-delay属性に数値で指定
data-delay属性にオブジェクトで指定
JavaScriptにおいてdelayオプションに数値を指定
JavaScriptにおいてdelayオプションにオブジェクトを指定
属性値一覧表
| 属性値 | 説明 |
|---|---|
| 数値 |
表示するまでの時間と、非表示にするまでの時間を、ミリ秒単位の数値で、一括指定する。 初期設定値は、数値の 0である。
|
| オブジェクト |
オブジェクトで指定すると、表示するまでの時間と、非表示にするまでの時間を、ミリ秒単位の数値で、個別に指定できる。data-delay属性に指定する場合、data-delay='{ "show": 数値, "hide": 数値 }'のように、showとhideをダブル・クォーテーション・マークで括る必要がある点に注意。JavaScriptで指定する場合は、 delay: { "show": 数値, "hide": 数値 }となる。
|
data-delay属性に数値で指定
ポップオーバーを呼び出す要素に、data-delay属性を追加し、ミリ秒単位の数値を指定する。
サンプル
ソースコード
HTML
<p>
<button type="button" class="btn btn-default" data-toggle="popover" data-delay="500" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン（500）</button>
button>
</p>
JavaScript
$(function () {
$('[data-toggle="popover"]').popover();
});
data-delay属性にオブジェクトで指定
ポップオーバーを呼び出す要素に、data-delay属性を追加し、オブジェクト'{ "show": 数値, "hide": 数値 }'形式で指定する。
サンプル
ソースコード
HTML
<p>
<button type="button" class="btn btn-default" data-toggle="popover" data-delay='{ "show": 100, "hide": 300 }' title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン（{ "show": 100, "hide": 300 }）</button>
</p>
JavaScript
$(function () {
$('[data-toggle="popover"]').popover();
});
JavaScriptにおいてdelayオプションに数値を指定
サンプル
ソースコード
HTML
<p> <button type="button" id="sample4popover" class="btn btn-default" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン（delay: 1000）</button> button> </p>
JavaScript
$(function () {
$('.sample4popover').popover(
{
delay: 1000
}
);
});
JavaScriptにおいてdelayオプションにオブジェクトを指定
サンプル
ソースコード
HTML
<p>
<button type="button" id="sample5popover" class="btn btn-default" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン（delay: { "show": 100, "hide": 400 }）</button>
button>
</p>
JavaScript
$(function () {
$('#sample5popover').popover(
{
delay: { "show": 100, "hide": 400 }
}
);
});