Popovers
Examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
Basic Examples
Click the following button to see the basic example of popover.
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?"> <span>Click to toggle popover</span> </button>
Four Directions
Use data-bs-placement value:
top, right, bottom, and
left direction.
<button type="button" class="btn btn-primary" data-bs-container="body"
data-bs-toggle="popover" data-bs-placement="top"
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
<span>Popover on top</span>
</button>
Dismissible Popover
Use the focus trigger to dismiss
popovers on the user’s next click of a different
element than the toggle element.
<button tabindex="0" class="btn btn-danger btn-dim" data-bs-toggle="popover"
data-trigger="focus" title="Dismissible popover"
data-bs-content="And here's some amazing content. It's very engaging. Right?">
<span>Dismissible popover</span>
</button>
Dismissible Popover
Use the focus trigger to dismiss
popovers on the user’s next click of a different
element than the toggle element.
<span class="d-inline-block" data-bs-toggle="popover" data-bs-content="Disabled popover"> <button class="btn btn-gray" style="pointer-events: none;" type="button" disabled><span>Disabled button</span></button> </span>
