Bootstrap 5 popovers display contextual information in a floating panel with a title and body. This page covers 4 popover patterns — basic, positions, HTML content and dismissible — each with working examples.

Quick Setup

Popovers require Bootstrap 5 JS and manual initialization:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
  document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => {
    new bootstrap.Popover(el)
  })
</script>

Key Classes Reference

AttributeWhat It Does
data-bs-toggle="popover"Marks element as popover trigger
data-bs-titlePopover title text
data-bs-contentPopover body content
data-bs-placementPosition: top, bottom, left, right
data-bs-html="true"Enables HTML in title and content
data-bs-triggerTrigger: click, hover, focus, manual
data-bs-custom-classAdds custom CSS class to popover

1. Basic Bootstrap 5 Popovers

Popovers with title and body content triggered on click. Require JavaScript initialization.

2. Bootstrap 5 Popovers on All Sides

Popovers positioned on top, bottom, left and right using data-bs-placement.

3. Bootstrap 5 HTML Popover

Popovers with rich HTML content including lists, links and formatted text.

4. Bootstrap 5 Dismissible Popover

Popover that closes when clicking anywhere outside using focus trigger and tabindex.

Frequently Asked Questions

Tooltips show only a short text string and trigger on hover by default. Popovers have both a title and body content, support HTML, and trigger on click by default. Popovers are larger and more interactive — use them for contextual help, feature highlights and rich content.
Popovers must be manually initialized with JavaScript: document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => new bootstrap.Popover(el)). Without this they won't appear. Add this after your Bootstrap JS bundle loads.
Get the Popover instance and call hide: bootstrap.Popover.getInstance(element).hide(). To close all open popovers: document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => { const p = bootstrap.Popover.getInstance(el); if(p) p.hide(); }).
Use a focus trigger on an anchor tag with tabindex='0': <a tabindex='0' data-bs-trigger='focus' data-bs-toggle='popover'>. This closes the popover when the element loses focus (user clicks elsewhere). Note: this requires an anchor tag, not a button.
Add data-bs-html='true' to the element and put HTML in data-bs-content and data-bs-title. Be careful with user-generated content as this can introduce XSS. Sanitize all user input before inserting into popover content.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →

Use code FIRST30 for 30% off your first purchase.

Related Components

Bootstrap 5 Tooltip Example

View examples →

Bootstrap 5 Modal Example

View examples →

Bootstrap 5 Alert Example

View examples →