placementオプション
ポップオーバー（popover.js）におけるplacementオプションは、ポップオーバーの表示位置を指定する場合に使用するオプション。
属性値一覧表
| 属性値 | 説明 |
|---|---|
top |
ポップオーバーを上に表示。 |
right |
ポップオーバーを右に表示。 |
bottom |
ポップオーバーを下に表示。 |
left |
ポップオーバーを左に表示。 |
auto |
ポップオーバーの位置を自動調性する。auto leftとすると、左に表示できる場合は、左に表示する。
|
data-placement属性に指定
ポップオーバーを呼び出す要素に、data-placement属性を追加し、top（上）、right（右）、bottom（下）、left（左）の何れかを指定する。
サンプル
｜ ｜ ｜ ｜
ソースコード
HTML
<p> <button type="button" class="btn btn-default" data-toggle="popover" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン デフォルト</button> ｜ <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン 上</button> ｜ <button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン 右</button> ｜ <button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン 下</button> ｜ <button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン 左</button> </p>
JavaScript
$(function () {
$('[data-toggle="popover"]').popover();
});
data-placement属性にautoを含めて指定
サンプル
｜
｜
｜
｜
ソースコード
HTML
<p> <button type="button" class="btn btn-default" data-toggle="popover" data-placement="auto left" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン auto left</button> ｜ <button type="button" class="btn btn-default" data-toggle="popover" data-placement="auto left" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン auto left</button> ｜ <button type="button" class="btn btn-default" data-toggle="popover" data-placement="auto" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン auto</button> ｜ <button type="button" class="btn btn-default" data-toggle="popover" data-placement="auto top" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン auto top</button> ｜<br><br><br><br><br><br> <button type="button" class="btn btn-default" data-toggle="popover" data-placement="auto top" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン auto top</button> </p>
JavaScript
$(function () {
$('[data-toggle="popover"]').popover();
});
JavaScriptにおいてplacementオプションを指定
サンプル
｜ ｜ ｜ ｜
ソースコード
HTML
<p> <button type="button" id="sample4popover1" class="btn btn-default" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン デフォルト</button> ｜ <button type="button" id="sample4popover2" class="btn btn-default" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン 上</button> ｜ <button type="button" id="sample4popover3" class="btn btn-default" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン 右</button> ｜ <button type="button" id="sample4popover4" class="btn btn-default" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン 下</button> ｜ <button type="button" id="sample4popover5" class="btn btn-default" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン 左</button> </p>
JavaScript
$(function () {
$('#sample4popover1').popover();
$('#sample4popover2').popover(
{
placement: 'top'
}
);
$('#sample4popover3').popover(
{
placement: 'right'
}
);
$('#sample4popover4').popover(
{
placement: 'bottom'
}
);
$('#sample4popover5').popover(
{
placement: 'left'
}
);
});