ポップオーバー

Overview

長さがゼロのtitle属性とcontent属性はポップオーバーを表示しません。
非表示要素のポップオーバーは動作しません。
disabled要素のポップオーバーはwrapper要素でトリガーされなければなりません。
複数行にまたがるアンカーからトリガーされた場合、ポップオーバーはアンカー全体の幅の中央に配置されます。この動作を避けるために、b-aコンポーネントで textNowrapを使用してください。
ポップオーバーは、対応する要素がDOMから削除される前に隠されなければなりません。
ポップオーバーは、shadowDOM内の要素によってトリガーすることができます。

Example

vue

<template>
 <b-button
  color="danger"
  size="lg"
  toggle="popover"
  title="Popover title"
  content="And here's some amazing content. It's very engaging. Right?"
 >
  Click to toggle popover
 </b-button>
</template>

Four directions

top、right、bottom、left alignedの4つのオプションがあります。BootstrapをRTLで使用する場合、方向はミラーリングされます。

vue

<template>
 <b-button
  color="secondary"
  toggle="popover"
  placement="top"
  content="Top popover"
 >
  Popover on top
 </b-button>
 <b-button
  color="secondary"
  toggle="popover"
  placement="right"
  content="Right popover"
 >
  Popover on right
 </b-button>
 <b-button
  color="secondary"
  toggle="popover"
  placement="bottom"
  content="Bottom popover"
 >
  Popover on bottom
 </b-button>
 <b-button
  color="secondary"
  toggle="popover"
  placement="left"
  content="Left popover"
 >
  Popover on left
 </b-button>
</template>

Dismiss on next click

focusトリガーを使用して、ユーザーが次にトグル要素とは異なる要素をクリックしたときにポップオーバーを解除します。

Dismissible popover

vue

<template>
 <Anchor
  tabindex="0"
  size="lg"
  button
  color="secondary"
  toggle="popover"
  placement="left"
  trigger="focus"
  title="Dismissible popover"
  content="And here's some amazing content. It's very engaging. Right?"
 >
  Dismissible popover
 </Anchor>
</template>

Disabled elements

disabled属性を持つ要素は、インタラクティブではありません。つまり、ユーザーがポップオーバー（またはツールチップ）をトリガーするためにカーソルを合わせたり、クリックしたりすることはできません。回避策として、wrapperのb-divコンポーネントまたはspanタグからポップオーバーをトリガーする必要があります。

無効化されたポップオーバートリガーでは、trigger="hover focus"を好むかもしれません、そうすることで、ユーザーは無効化された要素をクリックすることを期待しないかもしれないので、ポップオーバーが即座に視覚的なフィードバックとして表示されます。

vue

<template>
 <b-button
  button
  color="danger"
  size="lg"
  toggle="popover"
  trigger="hover focus"
  content="Disabled popover"
 >
  Click to toggle popover
 </b-button>

 <span
  class="d-inline-block"
  tabindex="0"
  toggle="popover"
  data-b-s-trigger="hover focus"
  data-bs-content="Disabled popover"
 >
  <b-button
   class="btn btn-primary"
   type="button"
   disabled
  >
   Disabled button
  </b-button>
 </span>
</template>

Bootstrap

Browse docs