Popovers

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.

<button 
  type="button"
  class="btn btn-primary"
  data-bs-toggle="popover"
  data-bs-placement="top"
  data-bs-title="Title of the popover"
  data-bs-content="Content of the popover that spans across multiple lines."
>
  Open popover
</button>

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(
  "[data-bs-toggle='popover']"
);
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.

<button 
  type="button"
  class="btn btn-primary"
  data-bs-toggle="popover"
  data-bs-placement="top"
  data-bs-custom-class="custom-popover"
  data-bs-html="true"
  data-bs-title="Custom popover"
  data-bs-content="This <strong>popover</strong> has been themed and customized."
>
  Custom popover
</button>

.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.

<a
  tabindex="0"
  class="btn btn-danger"
  role="button"
  data-bs-toggle="popover"
  data-bs-placement="top"
  data-bs-trigger="focus"
  data-bs-title="Dismissible popover"
  data-bs-content="Content of the popover that spans across multiple lines."
>
  Dismissible
</a>

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>
</span>

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