viewportオプション
ポップオーバー（popover.js）におけるviewportオプションは、ポップオーバーを表示する領域を指定するオプション。
指定した要素の領域をはみ出さないように、ポップオーバーを表示する。
属性値一覧表
初期設定値は、{ selector: 'body', padding: 0 }である。
| 属性値 | 説明 |
|---|---|
| 文字列 |
セレクター。 例： #sample
|
| オブジェクト |
セレクターや余白を、オブジェクトとしてまとめて指定できる。 例： { "selector": "#sample", "padding": 2 }
|
data-viewport属性に指定
ポップオーバーを呼び出す要素に、data-viewport属性を追加し、ポップオーバーの内容を指定する。
サンプル
ソースコード
HTML
<div id="sample2viewport"> <button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" data-viewport='{ "selector": "#sample2viewport", "padding": 2 }' title="ポップオーバーのタイトル" data-content="ポップオーバーの内容">サンプル・ボタン</button> <button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-viewport='{ "selector": "#sample2viewport", "padding": 2 }' title="ポップオーバーのタイトル" data-content="ポップオーバーの内容">サンプル・ボタン</button> <button type="button" class="btn btn-default pull-right" data-toggle="popover" data-placement="bottom" data-viewport='{ "selector": "#sample2viewport", "padding": 2 }' title="ポップオーバーのタイトル" data-content="ポップオーバーの内容">サンプル・ボタン</button> <br><br><br><br><br><br> <button type="button" class="btn btn-default" data-toggle="popover" data-viewport='{ "selector": "#sample2viewport", "padding": 2 }' title="ポップオーバーのタイトル" data-content="ポップオーバーの内容">サンプル・ボタン</button> </div>
CSS
#sample2viewport {
background-color: #b6ff00;
}
JavaScript
$(function () {
$('[data-toggle="popover"]').popover();
});
JavaScriptにおいてviewportオプションを指定
サンプル
ソースコード
HTML
<div id="sample3viewport"> <button type="button" id="sample3popover1" class="btn btn-default" title="ポップオーバーのタイトル">サンプル・ボタン</button> <button type="button" id="sample3popover2" class="btn btn-default" title="ポップオーバーのタイトル">サンプル・ボタン</button> <button type="button" id="sample3popover3" class="btn btn-default pull-right" title="ポップオーバーのタイトル">サンプル・ボタン</button> <br><br><br><br><br><br> <button type="button" id="sample3popover4" class="btn btn-default" title="ポップオーバーのタイトル">サンプル・ボタン</button> </div>
CSS
#sample3viewport {
background-color: #b6ff00;
}
JavaScript
$(function () {
$('#sample3popover1').popover(
{
content: 'ポップオーバーの内容',
placement: 'bottom',
viewport: { selector: '#sample3viewport', padding: 2 }
}
);
$('#sample3popover2').popover(
{
content: 'ポップオーバーの内容',
placement: 'right',
viewport: { selector: '#sample3viewport', padding: 2 }
}
);
$('#sample3popover3').popover(
{
content: 'ポップオーバーの内容',
placement: 'bottom',
viewport: { selector: '#sample3viewport', padding: 2 }
}
);
$('#sample3popover4').popover(
{
content: 'ポップオーバーの内容',
viewport: { selector: '#sample3viewport', padding: 2 }
}
);
});