Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
<button type="button" class="btn
btn-lg btn-primary" data-bs-toggle="popover" title="Popover
title" data-bs-content="And
here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>Four options are available: top, right, bottom, and left aligned.
<button type="button" class="btn
btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
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="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
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="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
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="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
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-lg btn-danger" 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>