とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. ポップオーバー

ポップオーバー

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

<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 のいずれかで指定します。

<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 で指定することも可能です。

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