Popovers & Tooltips
Documentation and examples for adding Bootstrap popovers and tooltips, like those found in iOS, to any element on your site.
Example Popover
You must initialize popovers before they can be used. One way to initialize all popovers on a page would be to select them by their data-bs-toggle
attribute, like so:
Popovers directions
Four options are available: top, right, bottom, left
. Directions are mirrored when using Bootstrap in RTL. Set to data-bs-placement=""
to change the direction.
Tooltip Example
One way to initialize all tooltips on a page would be to select them by their data-bs-toggle
attribute:
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.
Directions
Hover over the buttons below to see the four tooltips directions: top, right, bottom, left
. Directions are mirrored when using Bootstrap in RTL. Use these directions top, right, bottom, left
on data-bs-placement=""
for tooltip placement directions.