Popovers

Documentation and examples for adding Bootstrap popovers to any element on your site or app.

WARNING

This feature is only available in AdminKit PRO. Learn more.

Example: Enable popovers everywhere

One way to initialize all popovers on a page would be to select them by their data-bs-toggle attribute:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Example: Using the container option

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.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Example

<button type="button" class="btn btn-lg btn-danger" title="Popover title" data-bs-toggle="popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Four directions

Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.

<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-container="body" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-container="body" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-container="body" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-container="body" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

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-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

About

Things to know when using the popover plugin:

• Popovers rely on the 3rd party library Popper for positioning.
• Popovers require the tooltip plugin as a dependency.
• Popovers are opt-in for performance reasons, so you must initialize them yourself.
• Zero-length title and 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 .text-nowrap on your <a>s 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.

Keep reading to see how popovers work with some examples.