Bootstrap 5 Popover component
Responsive Popover built with the latest Bootstrap 5. Popovers containers used to display transient content such as menus, options, additional actions, and more in an overlay.
Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
Live example
Titles are set via data-bs-title
and body content is set via data-bs-content
.
<button type="button" class="btn btn-primary" data-bs-toggle="popover"
data-bs-content="And here's some amazing content. It's very engaging. Right?">
Open popover
</button>
Popovers are opt-in for performance reasons, you must initialize popover yourself via js new bootstrap.Popover()
.
Javascript
const element = document.querySelector("#target");
const popover = new bootstrap.popover(element);
title
or data-bs-title
in your HTML. When title is used, Popper will replace it automatically with data-bs-title
when the element is rendered.<button type="button" class="btn btn-primary"
data-bs-title="Popover title" data-bs-toggle="popover"
data-bs-content="And here's some amazing content. It's very engaging. Right?">
Open popover with title
</button>
Overview
Things to know when using the popover plugin:
- Popovers rely on the third party library Popper for positioning. You must include
popper.min.js
beforebootstrap.js
, or use onebootstrap.bundle.min.js
which contains Popper. - 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
ordisabled
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.
Placement
There are four options are available: top, right, bottom, and left.
<button type="button" class="btn btn-primary" 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-primary" 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-primary" 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-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
Popover on left
</button>
Dismiss popover
Use the focus
trigger to dismiss popovers on the user’s next click of a different element than the toggle element.
<a tabindex="0" class="btn btn-primary" 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>
Specific markup required for dismiss-on-next-click
For proper cross-browser and cross-platform behavior, you must use the <a>
tag, not the <button>
tag, and you also must include a tabindex
attribute.
Interactions
Mouse over event
Sets a data-bs-trigger="hover"
attribute allows a popover will be triggered on mouse over an element. There are four options available: click, hover, focus, manual.
<button
type="button"
class="btn btn-primary"
data-bs-toggle="popover"
data-bs-trigger="hover"
data-bs-content="I use popover.">
Hover with a Popover
</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
You can 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 some of the local CSS variables.
.custom-popover {
--bs-popover-max-width: 200px;
--bs-popover-border-color: #6e5dc6;
--bs-popover-header-bg: #6e5dc6;
--bs-popover-header-color: var(--bs-white);
--bs-popover-body-padding-x: 1rem;
--bs-popover-body-padding-y: 0.5rem;
}
<button type="button" class="btn btn-primary"
data-bs-toggle="popover" data-bs-placement="right"
data-bs-custom-class="custom-popover"
data-bs-title="Custom popover"
data-bs-content="This popover is themed via CSS variables.">
Custom popover
</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"
.
<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>