Bootstrap3
日本語リファレンス

広告

containerオプション


ポップオーバー(popover.js)におけるcontainerオプションは、通常は指定する必要はない。ボタン・グループ内やインプット・グループ内でポップオーバーを呼び出す場合に必要なことがある。


属性値 説明
文字列 ポップオーバーを追加する要素。
bodyなど。
false 指定なし。
初期設定値である。

ボタン・グループ内のポップオーバーを呼び出す要素に、data-container属性を追加し、bodyを指定する。

サンプル

data-container属性を指定した場合


data-container属性を指定しない場合

ソースコード

HTML

<p><code>data-container</code>属性を指定した場合</p>
<div class="btn-group" role="group">
	<button type="button" class="btn btn-default" data-toggle="popover" data-container="body" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">左</button>
	<button type="button" class="btn btn-default" data-toggle="popover" data-container="body" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">中央</button>
	<button type="button" class="btn btn-default" data-toggle="popover" data-container="body" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">右</button>
</div>
<hr>
<p><code>data-container</code>属性を指定しない場合</p>
<div class="btn-group" role="group">
	<button type="button" class="btn btn-default" data-toggle="popover" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">左</button>
	<button type="button" class="btn btn-default" data-toggle="popover" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">中央</button>
	<button type="button" class="btn btn-default" data-toggle="popover" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">右</button>
</div>

JavaScript

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

containerオプションを指定した場合


containerオプションを指定しない場合

ソースコード

HTML

<p><code>data-container</code>属性を指定した場合</p>
<div id="sample3popover1" class="btn-group" role="group">
	<button type="button" class="btn btn-default" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">左</button>
	<button type="button" class="btn btn-default" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">中央</button>
	<button type="button" class="btn btn-default" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">右</button>
</div>
<hr>
<p><code>data-container</code>属性を指定しない場合</p>
<div id="sample3popover2" class="btn-group" role="group">
	<button type="button" class="btn btn-default" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">左</button>
	<button type="button" class="btn btn-default" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">中央</button>
	<button type="button" class="btn btn-default" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">右</button>
</div>

JavaScript

$('#sample3popover1 button').popover(
	{
		container: 'body'
	}
);
$('#sample3popover2 button').popover(
	{
		container: false
	}
);

広告