とほほのBootstrap 4入門

data-toggle="popover" はボタンクリック時にポップオーバーを表示します。title はタイトルを、data-content は本文を指定します。表示されるポップオーバーには、.popover, .popover-header, .popover-body のスタイルが適用されます。ポップオーバーを有効にするには、下記の JavaScript も埋め込んでおく必要があります。

Sample

Code

<script>
(function() {
  window.addEventListener("load", function () {
    $('[data-toggle="popover"]').popover();
  });
})();
</script>

<button type="button" class="btn btn-primary"
    data-toggle="popover"
    title="Popover title"
    data-content="This is a popover content.">
  Button
</button>

data-placement はポップオーバーを表示する方向を top | bottom | right | left のいずれかで指定します。

Sample

Code

<button type="button" class="btn btn-primary"
    data-toggle="popover"
    data-placement="top"
    title="Popover title"
    data-content="This is a popover content.">
  Top
</button>

data-placement の他にも、data-*="..." で下記のオプションを指定することができます。これらはまた、下記の様に JavaScript で指定することも可能です。

Code

$(...).popover({placement:'right', html:true});

名前	型	規定値	説明
`animation`	boolean	true	ポップオーバー表示時にアニメーションを利用するか否か。
`container`	string \| element \| false	false	ポップオーバーを追加する要素を指定します。通常は必要ありませんが、インプットグループやボタングループ等の中でポップオーバーを使用する際に、親要素のスタイルがポップオーバーに影響を与える場合、`container` に `'body'` を指定することでその問題を回避できることがあります。
`content`	string \| element \| function	''	ポップオーバーのコンテントを指定します。
`delay`	number \| object	0	表示・非表示を始めるまでの遅延時間をミリ秒単位で指定します。`{"show":500, "hide":100}` の様に個々に指定することもできます。
`html`	boolean	false	`content` をテキストではなく、HTML として指定可能か否かを指定します。`true` にする場合は、XSS 脆弱性に注意してください。
`placement`	string \| function	'right'	ポップオーバーを表示する方向を `top \| right \| bottom \| left \| auto` のいずれかで指定します。関数を指定して動的に決定することもできます。
`selector`	string \| false	false	ポップオーバーを表示する対象の要素を `'#btn1'` などの CSSセレクタで指定します。ダイナミックに追加された要素に対してポップオーバーを表示したい際に利用されます。
`template`	string	右記参照	ポップオーバーのテンプレートを指定します。デフォルトは `'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'` となっています。
`title`	string \| element \| function	''	ポップオーバーのタイトルを指定します。
`trigger`	string	'click'	ポップオーバーを表示するトリガーを指定します。`click \| hover \| focus \| manual` を指定できます。`manual` 以外は空白文字で区切って複数指定可能です。
`offset`	number \| string	0	ポップオーバーを表示するオフセット位置を指定します。"100,200" の様に縦方向と横方向を指定することも可能です。(横方向しか動作しない？)
`fallbackPlacement`	string \| array	'flip'	ポップオーバーを表示する方式を指定します。`flip \| clockwise \| counterclockwise` のいずれかを指定できます。
`boundary`	string \| element	'scrollParent'	ドロップダウンがオーバーフローする際の制約境界を指定します。ビューポート(`viewport`)、ウィンドウ(`window`)、スクロールする親要素(`scrollParent`) や、JavaScript の場合は任意の HTML 要素を指定することができます。詳細は Popper.js の preventOverflow を参照してください。

ポップオーバー

表示方向

オプション