Popover ​

Bootstrap

Bootstrap popover — context or explanation, not a menu. Markup below; usage → Rules.

Docs init popovers in bootstrap-overlays.js. Default data-bs-trigger="hover focus", data-bs-placement="bottom".

Info ​

Field help: btn-ghost btn-sm + bi-info-circle, data-bs-title + data-bs-content.

html
<button
  type="button"
  class="btn btn-ghost btn-sm"
  aria-label="Quote potential"
  data-bs-toggle="popover"
  data-bs-trigger="hover focus"
  data-bs-placement="bottom"
  data-bs-title="Quote potential"
  data-bs-content="Estimated deal value based on company size and the products in scope. Updates when the account’s profile changes."
>
  <i class="bi bi-info-circle"></i>
</button>

Contact ​

Person summary: trigger can be an avatar with role="button", tabindex="0", and aria-label.

MD
html
<span
  class="avatar text-bg-info"
  role="button"
  tabindex="0"
  aria-label="Marieke de Groot"
  data-bs-toggle="popover"
  data-bs-trigger="hover focus"
  data-bs-placement="bottom"
  data-bs-title="Marieke de Groot"
  data-bs-content="Owner · 12 open tasks"
  >MD</span
>

Rules ​

When to use ​

  • Explanatory copy on hover/focus — closes without choosing an item.
  • Not a selectable list (dropdown) or task flow (modal).

Content ​

  • One title line + short body — longer than a tooltip, shorter than a side panel.
  • No primary or destructive actions inside the popover.

Triggers ​

Info fields: icon button. People: avatar trigger as above. Flat icons: Iconography.