Bootstrap3
日本語リファレンス

広告

viewportオプション


ポップオーバー(popover.js)におけるviewportオプションは、ポップオーバーを表示する領域を指定するオプション。

指定した要素の領域をはみ出さないように、ポップオーバーを表示する。


初期設定値は、{ selector: 'body', padding: 0 }である。

属性値 説明
文字列 セレクター。
例:#sample
オブジェクト セレクターや余白を、オブジェクトとしてまとめて指定できる。
例:{ "selector": "#sample", "padding": 2 }

ポップオーバーを呼び出す要素に、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();
});
サンプル






ソースコード

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 }
		}
	);
});

広告