Bootstrap3
日本語リファレンス

広告

animationオプション


ポップオーバー(popover.js)におけるanimationオプションは、フェード・インのアニメーションで表示し、フェード・アウトのアニメーションで非表示にするかどうかを設定するオプション。


属性値 説明
true フェード・アニメーションで、表示/非表示。
false フェード・アニメーションなしで、表示/非表示。

ポップオーバーを呼び出す要素に、data-animation属性を追加し、truefalseの何れかを指定する。

サンプル

ソースコード

HTML

<p>
	<button type="button" class="btn btn-default" data-toggle="popover" data-animation="true" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン(true)</button>
</p>
<p>
	<button type="button" class="btn btn-default" data-toggle="popover" data-animation="false" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン(false)</button>
</p>

JavaScript

$(function () {
	$('[data-toggle="popover"]').popover();
});
サンプル

ソースコード

HTML

<p>
	<button type="button" id="sample3popover1" class="btn btn-default" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン(true)</button>
</p>
<p>
	<button type="button" id="sample3popover2" class="btn btn-default" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン(false)</button>
</p>

JavaScript

$(function () {
	$('#sample3popover1').popover(
		{
			animation: true
		}
	);
	$('#sample3popover2').popover(
		{
			animation: false
		}
	);
});

広告