Popovers
A pop-up box that appears when the user clicks/hovers on an element.
Static examples
Top popover
And here's some amazing content inside popover body that can be html. It's very engaging. Right?
Right popover
And here's some amazing content inside popover body that can be html. It's very engaging. Right?
Bottom popover
And here's some amazing content inside popover body that can be html. It's very engaging. Right?
Left popover
And here's some amazing content inside popover body that can be html. It's very engaging. Right?
Live demo
<!-- Popover on top -->
<button type="button" class="btn btn-outline-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover" title="Top popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">
Popover on top
</button>
<!-- Popover on right -->
<button type="button" class="btn btn-outline-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="hover" title="Right popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">
Popover on right
</button>
<!-- Popover on bottom -->
<button type="button" class="btn btn-outline-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-trigger="hover" title="Bottom popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">
Popover on bottom
</button>
<!-- Popover on left -->
<button type="button" class="btn btn-outline-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-trigger="hover" title="Left popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">
Popover on left
</button>Toggle options
<!-- Toggle popover on click (click is default trigger) -->
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" title="Popover on click" data-bs-content="And here's some amazing content. It's very engaging. Right?">
Toggle popover on click
</button>
<!-- Toggle popover on hover -->
<button type="button" class="btn btn-outline-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover" title="Popover on hover" data-bs-content="And here's some amazing content. It's very engaging. Right?">
Toggle popover on hover
</button>
<!-- Toggle popover on focus -->
<a class="btn btn-outline-secondary" href="#!" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Popover on focus" data-bs-content="And here's some amazing content. It's very engaging. Right?" tabindex="1">
Toggle popover on focus
</a>