Bootstrap Popover: How to Use Popovers in Bootstrap 5

A Bootstrap popover is a small floating panel with a title and some content that opens next to an element when it is clicked: a definition, a short help text, or a preview. It is the bigger sibling of the tooltip, and like the tooltip it is built on the Popper library and does nothing until you turn it on with JavaScript. This guide covers the markup, initialization, placement, closing a popover on the next click, HTML content, styling, and common problems. Everything is for Bootstrap 5.3.

A working popover

<button type="button" class="btn btn-outline-secondary"
  data-bs-toggle="popover"
  data-bs-title="Annual billing"
  data-bs-content="You pay for 12 months up front and get 2 months free.">
  How does annual billing work?
</button>

Load Bootstrap’s JavaScript bundle, which includes Popper, and initialize every popover on the page:

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

Like tooltips, popovers are opt-in for performance, so without the initialization clicking does nothing. Clicking the button opens the popover; clicking the button again closes it.

Popover or tooltip?

If the text is a label, use a tooltip. If people need to read it, use a popover.

Placement

Set the side with data-bs-placement: top, right (the default), bottom, or left.

<button class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="bottom"
  data-bs-content="Shown below the button.">Bottom</button>

If there isn’t room on that side, Popper flips the popover to the opposite side automatically.

Close the popover on the next click

By default a popover stays open until its button is clicked again, even if the user clicks elsewhere. To close it on the next click anywhere, use the focus trigger. It needs an element that can take focus and keep it, so use a link with tabindex="0" rather than a button, which some browsers don’t focus on click:

<a tabindex="0" class="btn btn-outline-primary" role="button"
  data-bs-toggle="popover" data-bs-trigger="focus"
  data-bs-title="What counts as a seat?"
  data-bs-content="Anyone who can sign in. Viewers with read-only links are free.">Seats</a>

Hover popovers

To open on hover instead, set data-bs-trigger="hover focus". Keep focus in the list so keyboard users can open it too. Hover popovers suit previews; for anything people need to click inside, keep the click trigger, because the popover closes as soon as the pointer leaves the button.

HTML inside a popover

Allow HTML with data-bs-html="true", or pass the content in JavaScript, which is easier to read:

new bootstrap.Popover(document.querySelector('#plan-info'), {
  html: true,
  title: 'Pro plan',
  content: '<ul class="mb-0 ps-3"><li>Unlimited projects</li><li>Priority support</li></ul>',
})

Bootstrap’s sanitizer removes scripts and tags it doesn’t allow, such as <form> and <input>. Don’t put text that users typed into an HTML popover without escaping it first.

Popovers on disabled buttons

Disabled elements can’t be clicked or focused, so wrap the button and put the popover on the wrapper:

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover"
  data-bs-trigger="hover focus" data-bs-content="Add a payment method to upgrade.">
  <button class="btn btn-primary" type="button" disabled>Upgrade</button>
</span>

Control popovers with JavaScript

const popover = bootstrap.Popover.getOrCreateInstance('#plan-info')
popover.show()
popover.hide()
popover.toggle()
popover.setContent({ '.popover-header': 'New title', '.popover-body': 'New content' })

Listen for shown.bs.popover and hidden.bs.popover on the element to run code when it opens or closes. To close every open popover when one opens, hide the others in a show.bs.popover handler.

Style popovers

Popovers use CSS variables:

.popover {
  --bs-popover-max-width: 320px;
  --bs-popover-border-color: #2f55ff;
  --bs-popover-header-bg: #2f55ff;
  --bs-popover-header-color: #fff;
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .75rem;
}

Apply them to one popover only with data-bs-custom-class="popover-brand" and a .popover-brand rule. In Sass, $popover-max-width (276px by default), $popover-bg, and $popover-header-bg set the defaults. Popovers follow the color mode, so they turn dark in dark mode on their own.

Common problems

Nothing happens on click. Popovers aren’t initialized. Add the new bootstrap.Popover(el) loop after the JavaScript bundle.

An error says Popper is required. Load bootstrap.bundle.min.js, which includes Popper, instead of bootstrap.min.js.

Popovers on content added later don’t work. Initialize them after adding the content, or use the selector option on a parent: new bootstrap.Popover(document.body, { selector: '[data-bs-toggle="popover"]' }).

The popover is cut off inside a card or table. A parent has overflow: hidden. Set container: 'body' in the options.

The markup uses Bootstrap 4 attributes. Bootstrap 5 needs data-bs-toggle, data-bs-content, and data-bs-placement, not data-toggle and the other old names.

FAQ

How do I enable popovers in Bootstrap 5?

Add data-bs-toggle="popover" and data-bs-content to an element, load bootstrap.bundle.min.js, then initialize them: document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => new bootstrap.Popover(el)). Popovers are opt-in, so they don’t work without this step.

What is the difference between a tooltip and a popover in Bootstrap?

A tooltip shows one short line on hover or focus and suits labels. A popover opens on click, has a title and a body, and suits longer explanations. Both need JavaScript initialization and Popper.

How do I close a Bootstrap popover when clicking outside?

Use data-bs-trigger="focus" on an element that keeps focus, such as <a tabindex="0" role="button">. The popover then closes on the next click anywhere on the page.

How do I put HTML in a Bootstrap popover?

Set data-bs-html="true", or pass html: true and the content in the JavaScript options. Bootstrap sanitizes the HTML, removing scripts and disallowed tags such as forms.

How do I change the width of a Bootstrap popover?

Set the --bs-popover-max-width CSS variable on .popover, or on a custom class applied with data-bs-custom-class. In Sass, change $popover-max-width, which defaults to 276px.