Bootstrap 5Feedback

Bootstrap 5 Popover

Bootstrap 5 Popovers are floating overlay panels triggered by user interaction (click or hover) that display a title and body content anchored to a specific element. They extend tooltips with support for richer HTML content and a visible header. Use them when you need to surface supplementary information (such as field explanations, feature previews, or contextual help) without navigating away from the current view.

Bootstrap class

.popover

Common use cases

Explaining a pricing tier's included features when a user clicks an 'info' icon next to a plan name on a pricing table
Showing a brief product description and CTA button when hovering over a thumbnail in a compact product grid
Displaying keyboard shortcut references when a user clicks a help icon inside a code editor or dashboard toolbar
Confirming a destructive action (e.g., 'This will permanently delete 3 files. Are you sure?') inline before a user proceeds

Variants and classes

Variant	Description and classes	Classes
Basic popover	Title and body shown next to the trigger on click.`data-bs-toggle="popover" + data-bs-title + data-bs-content`	`data-bs-toggle="popover" + data-bs-title + data-bs-content`
Placement	Open above, right, below or left of the trigger.`data-bs-placement="top \| right \| bottom \| left"`	`data-bs-placement="top \| right \| bottom \| left"`
Dismiss on next click	Closes when the user clicks anywhere else.`data-bs-trigger="focus"`	`data-bs-trigger="focus"`
Custom class	Adds your own class to the popover for custom colours.`data-bs-custom-class="…"`	`data-bs-custom-class="…"`

Code example

HTML

<button type="button" class="btn btn-outline-primary" data-bs-toggle="popover" data-bs-placement="right" data-bs-title="Storage Limit" data-bs-content="Your plan includes 10 GB of storage. Upgrade to Pro for unlimited storage and priority sync.">What's included?</button>

<!-- Initialise all popovers via JavaScript -->
<script>
  const popoverTriggers = document.querySelectorAll('[data-bs-toggle="popover"]');
  popoverTriggers.forEach(el => new bootstrap.Popover(el));
</script>

Live examples

Basic Popover

Example 1

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

Canvas Builder generated popover with custom colours
Popover with interactive states
Responsive popover for all screen sizes

Best practices

Popovers require explicit JavaScript initialisation

Unlike dropdowns, popovers are opt-in and will not work from data attributes alone. You must initialise them with new bootstrap.Popover(element) or by querying all trigger elements. Forgetting this is the most common cause of popovers silently not appearing.

Use `data-bs-trigger="focus"` for accessible dismissal

Setting data-bs-trigger="focus" causes the popover to close when the user clicks anywhere else on the page, which is ideal for accessibility and mobile UX. Pair this with an <a> tag instead of a <button> and add tabindex="0" to ensure keyboard users can trigger and dismiss it correctly.

Sanitise HTML content carefully

Bootstrap 5 sanitises popover HTML by default to prevent XSS. If your popover body legitimately needs HTML tags like <strong> or <a>, pass { html: true } in the JavaScript initialiser, but never render user-generated content through this path.

Control placement dynamically with Popper.js fallbacks

Bootstrap 5 uses Popper.js under the hood, so if data-bs-placement="top" would cause overflow, Popper automatically flips the popover. You can define allowed fallback placements via the fallbackPlacements option in JavaScript for full control near viewport edges.

FAQ

Why isn't my popover showing up even though I added the data attributes?

Popovers are opt-in components in Bootstrap 5. They are deliberately not auto-initialised for performance reasons. You must manually initialise them in JavaScript. The quickest fix is document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => new bootstrap.Popover(el)) placed after your Bootstrap JS bundle loads. Also confirm that bootstrap.bundle.min.js (which includes Popper.js) is used, not bootstrap.min.js, as Popper is required.

How do I customise the popover's appearance: background colour, border, and font size?

Bootstrap 5 exposes CSS custom properties for popovers that you can override in your stylesheet. The key variables are --bs-popover-bg for background colour, --bs-popover-border-color for the border, --bs-popover-header-bg for the title area, and --bs-popover-body-font-size for text size. Target them on .popover in your CSS: .popover { --bs-popover-bg: #1a1a2e; --bs-popover-body-color: #ffffff; }. For per-instance customisation, use the customClass JavaScript option to attach a scoped class.

How does Canvas Builder handle Popover components in generated websites?

When you describe a UI need involving contextual overlays or inline help in Canvas Builder, it generates the full popover markup with correct data-bs- attributes, inserts the required JavaScript initialisation block, and applies your brand's colour palette to the popover via CSS variable overrides scoped to .popover. The output is production-ready, no additional configuration needed.