Popovers

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

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 before bootstrap.js, or use one bootstrap.bundle.min.js which contains Popper.
Popovers require the popover 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.

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

Four directions

Four options are available: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL. Set data-bs-placement to change the direction.

Preview
HTML code

                
<button type="button" class="btn btn-secondary mb-3 mb-md-0" 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-success mb-3 mb-md-0" 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-danger mb-3 mb-md-0" 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 mb-3 mb-md-0" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">Popover on left</button>