containerオプション
ポップオーバー（popover.js）におけるcontainerオプションは、通常は指定する必要はない。ボタン・グループ内やインプット・グループ内でポップオーバーを呼び出す場合に必要なことがある。
属性値一覧表
| 属性値 | 説明 |
|---|---|
| 文字列 |
ポップオーバーを追加する要素。bodyなど。
|
| false |
指定なし。 初期設定値である。 |
data-container属性に指定
ボタン・グループ内のポップオーバーを呼び出す要素に、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();
JavaScriptにおいてcontainerオプションを指定
サンプル
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
}
);