Popovers
Popovers are used to provide additional information on elements where a simple tooltip is not sufficient.
Default markup
To create a default popover use:
<button type="button" class="btn" 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 directions
Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.
<button type="button" class="btn" 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" 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" 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" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
Popover on left
</button>
Popover on hover
Popover can be triggered manual, with a click and on focus and on hover. This one reacts on hover.
<button type="button" class="btn btn-primary" data-bs-trigger="hover" data-bs-toggle="popover"
title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?"
>
Hover to toggle popover
</button>
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like Tabler? tweet about it!
Support Tabler's development: Github Sponsors
