Popovers

Overview#

Things to know when using the popover plugin:

• Popovers rely on the third party library Popper for positioning. Use bootstrap.bundle.min.js, which contains Popper (see JavaScript).
• 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 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.

Examples#

Enable popovers#

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

Live demo#

We use JavaScript similar to the snippet above to render the following live popover. Titles are set via data-bs-title and body content is set via data-bs-content.

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

This is the markup the plugin generates, drawn in place for each of the four placements:

Four directions#

Four options are available: top, right, bottom, and left. Set data-bs-placement to change the direction.

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

felt-css has no --bs-popover-* variables. To restyle single popovers, add a class with data-bs-custom-class="custom-popover" and target .custom-popover, .popover-header and .popover-body in your own CSS.

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-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</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-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

JavaScript behavior#

felt-css is CSS only; positioning, showing and hiding come from Bootstrap's popover plugin, which builds the .popover markup shown above and sets its placement class. Enable popovers via JavaScript:

const exampleEl = document.getElementById('example')
const popover = new bootstrap.Popover(exampleEl, options)

Options (placement, trigger, container, html, offset, customClass, …), methods (show, hide, toggle, enable, disable, setContent, update, dispose) and events (show.bs.popover, shown.bs.popover, hide.bs.popover, hidden.bs.popover, inserted.bs.popover) work exactly as described in Bootstrap's popover documentation.