delayオプション
ツールチップ（tooltip.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属性を追加し、ミリ秒単位の数値を指定する。
サンプル
ソースコード
<p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-delay="500" title="ツールチップ">サンプル・ボタン（500）</button>
button>
</p>
data-delay属性にオブジェクトで指定
ツールチップを呼び出す要素に、data-delay属性を追加し、オブジェクト'{ "show": 数値, "hide": 数値 }'形式で指定する。
サンプル
ソースコード
<p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-delay='{ "show": 100, "hide": 300 }' title="ツールチップ">サンプル・ボタン（{ "show": 100, "hide": 300 }）</button>
</p>
JavaScriptにおいてdelayオプションに数値を指定
サンプル
ソースコード
HTML
<p> <button type="button" class="btn btn-default sample4Tooltip" title="ツールチップ">サンプル・ボタン（delay: 1000）</button> button> </p>
JavaScript
$('.sample4Tooltip').tooltip(
{
delay: 1000
}
);
JavaScriptにおいてdelayオプションにオブジェクトを指定
サンプル
ソースコード
HTML
<p>
<button type="button" class="btn btn-default sample5Tooltip" title="ツールチップ">サンプル・ボタン（delay: { "show": 100, "hide": 400 }）</button>
button>
</p>
JavaScript
$('.sample5Tooltip').tooltip(
{
delay: { "show": 100, "hide": 400 }
}
);