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.
Primary Class
.popoverCommon 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 & Classes
| Variant | Description |
|---|---|
| Popover Default | Standard popover with Bootstrap's default styling. |
| Popover Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<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
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓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.