Popovers
Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
Popovers on BootstrapBasic Example
<div class="row g-1">
<div class="col-auto">
<button class="btn btn-secondary m-1" type="button" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top Popover">Top Popover</button>
</div>
<div class="col-auto">
<button class="btn btn-secondary m-1" type="button" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left Popover">Left Popover</button>
</div>
<div class="col-auto">
<button class="btn btn-secondary m-1" type="button" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right Popover">Right Popover</button>
</div>
<div class="col-auto">
<button class="btn btn-secondary m-1" type="button" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom Popover">Bottom Popover</button>
</div>
</div>Dismissible Example
Use the data-bs-trigger="focus" to dismiss popovers on the user’s next click of a different element than the toggle element.
<a class="btn btn-lg btn-danger" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>