Popovers & Tooltips
Popover
Popover is a component which displays a box with a content after a click on an element - similar to the tooltip but can contain more content. Four options are available: top, right, bottom, and left aligned.
<button type="button" class="btn btn-info" data-bs-toggle="popover" title="Popover title" data-bs-content="Some amazing content. It's very engaging. Right?">Click to toggle popover</button>
Popover Directions
Use the attribute data-bs-trigger="hover" to show the popover on hovering the element.
<a href="#x" class="btn btn-info" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-bs-original-title="Popover On Top">Up</a>
<a href="#x" class="btn btn-warning" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-bs-original-title="Popover On Right">Right</a>
<a href="#x" class="btn btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-bs-original-title="Popover On Bottom">Down</a>
<a href="#x" class="btn btn-success" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-bs-original-title="Popover On Left">Left</a>
Tooltips on Text
Hover over the links below to see tooltips.
Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.
<p class="mb-0">
Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" title="" data-bs-original-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" title="" data-bs-original-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" title="" data-bs-original-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" title="" data-bs-original-title="The last tip!">your own</a> site or project.
</p>
Tooltip Positions
Use utilities to modify a .badge and position it in the corner of a link or button.
<a href="#x" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Tooltip on top" aria-label="Tooltip on top">Tooltip Top</a>
<a href="#x" class="btn btn-warning" data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="Tooltip on right" aria-label="Tooltip on right">Tooltip Right</a>
<a href="#x" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Tooltip on bottom" aria-label="Tooltip on bottom">Tooltip Bottom</a>
<a href="#x" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="left" title="" data-bs-original-title="Tooltip on left" aria-label="Tooltip on left">Tooltip Left</a>