BS5 Popover

What is a popover?

A popover is like a tooltip, but it can contain a title and more content. Popovers require Bootstrap JavaScript and manual initialization.

Popover markup

<button type="button" class="btn btn-secondary"
  data-bs-toggle="popover"
  data-bs-title="Popover title"
  data-bs-content="This is the popover content.">
  Click me
</button>

Initialize popovers

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(el => new bootstrap.Popover(el));

Placement

data-bs-placement="top"
data-bs-placement="right"
data-bs-placement="bottom"
data-bs-placement="left"

Dismiss on focus

Use focus trigger so the popover closes when clicking elsewhere.

<button type="button" class="btn btn-secondary"
  data-bs-toggle="popover"
  data-bs-trigger="focus"
  data-bs-title="Tip"
  data-bs-content="Closes when it loses focus.">
  Focus popover
</button>

Best practices

• Use popovers for short help content, not long documentation
• Prefer trigger="focus" to avoid sticky popovers
• Keep titles and content concise