とほほのBootstrap 4入門

トップ > 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 を参照してください。

Copyright (C) 2015-2019 杜甫々
初版:2015年9月6日 最終更新:2019年1月6日
http://www.tohoho-web.com/bootstrap/popovers.html