Popovers can be used to display some content on top of another component.

Overview #

A few important things to know when using the popover plugin:

  • Popovers rely on the third party library Popper (opens in new tab) for positioning. You must include popper.js before bootstrap.js, or use one bootstrap.bundle.js which contains Popper.
  • Popovers are opt-in for performance reasons, so you must initialize them yourself.

You can create popovers using the data-bs-toggle="popover" attribute along with a data-bs-title and data-bs-content. Click on the following button to see a popover. By default, the button must be clicked again to dismiss the popover.

  class="btn btn-primary"
  data-bs-title="Title of the popover"
  data-bs-content="Content of the popover that spans across multiple lines."
  Open popover

As mentioned above, you must initialize popovers before they can be used. One way to initialize all popovers on a page would be to select them by their data-bs-toggle attribute, like so:

const popoverTriggerList = document.querySelectorAll(
const popoverList = [...popoverTriggerList].map(
  popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl)

A few more things worth noting about popovers:

  • Zero-length data-bs-title and data-bs-content values will never show a popover.
  • Specify container: "body" to avoid rendering problems in more complex components (like our input groups, button groups, etc).
  • Triggering popovers on hidden elements will not work.
  • Popovers for .disabled or disabled elements must be triggered on a wrapper element.
  • When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors' overall width. Use white-space: nowrap on your <a> elements to avoid this behavior.
  • Popovers must be hidden before their corresponding elements have been removed from the DOM.
  • Popovers can be triggered thanks to an element inside a shadow DOM.
  • You can use title instead of data-bs-title. When title is used, Popper will replace it automatically with data-bs-title when the element is rendered.

Directions #

Set the direction of the popover using data-bs-placement="{direction}", where {direction} can be top, right, bottom, or left. Directions are mirrored when using Halfmoon in RTL.

<!-- Popover on top -->
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top">Top</button>

<!-- Popover on right -->
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right">Right</button>

<!-- Popover on bottom -->
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom">Bottom</button>

<!-- Popover on left -->
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left">Left</button>

Custom container #

When you have some styles on a parent element that interfere with a popover, you'll want to specify a custom container so that the popover's HTML appears within that element instead. This is common in responsive tables, input groups, and the like.

const popover = new bootstrap.Popover(".example-popover", {
  container: "body"

Another situation where you'll want to set an explicit custom container are popovers inside a modal dialog, to make sure that the popover itself is appended to the modal. This is particularly important for popovers that contain interactive elements – modal dialogs will trap focus, so unless the popover is a child element of the modal, users won't be able to focus or activate these interactive elements.

const popover = new bootstrap.Popover(".example-popover", {
  container: ".modal-body"

Custom HTML and styling #

Add custom HTML inside the popover by adding the data-bs-html="true" attribute and placing your markup inside the data-bs-title or data-bs-content. Moreover, you can also customize the appearance of popovers using CSS variables. We set a custom class with data-bs-custom-class="custom-popover" to scope our custom appearance and use it to override the local CSS variables.

  class="btn btn-primary"
  data-bs-title="Custom popover"
  data-bs-content="This <strong>popover</strong> has been themed and customized."
  Custom popover
.custom-popover {
  --bs-popover-bg: var(--bs-primary-bg-subtle);
  --bs-popover-border-color: var(--bs-primary-border-subtle);
  --bs-popover-header-bg: var(--bs-primary-bg-subtle);
  --bs-popover-header-color: var(--bs-primary-text-emphasis);
  --bs-popover-header-border-color: var(--bs-primary-border-subtle);

Dismiss on next click #

Use the focus trigger to dismiss popovers on the user's next click of an element other than the toggle element.

  class="btn btn-danger"
  data-bs-title="Dismissible popover"
  data-bs-content="Content of the popover that spans across multiple lines."
const popover = new bootstrap.Popover(".popover-dismiss", {
  trigger: "focus"

Disabled elements #

Elements with the disabled attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper <div> or <span>, ideally made keyboard-focusable using tabindex="0".

For disabled popover triggers, you may also prefer data-bs-trigger="hover focus" so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Disabled popover" data-bs-trigger="hover focus">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>

JavaScript usage #

The examples on this page use data-bs-* attributes for functionality, which is usually enough to cover a majority of use-cases. You can read about options, methods, events, and more in the official Bootstrap documentation.

Popovers - Bootstrap
Continue reading on the offical documentation website

Up next

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.