Elements:Tooltips & Popovers
Tooltips and popovers allow for text and content to be shown when text or content is hovered or clicked. These can be useful for providing inline "hints" to site users as the read something.
Tooltips
Simply add
data-bs-toggle="tooltip"
to any link element along with a
title="TEXT-TO-SHOW-ON-HOVER"
Example
Hover the clicks in the text below to see examples.
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.
Tooltip placement
Adding a
data-bs-placement="top|right|bottom|left"
attribute to the link element allows you to control the placement of the tooltip on hover.
Trigger
By default Tooltips are triggered when the link element is hovered but you can alter this behaviour by adding a
data-bs-trigger="click|hover|focus"
attribute.
On click
On focus (closes when other element is clicked)
Tooltip with HTML content
To support HTML within the tooltip simply add the attribute
data-bs-html="true"
to the link element.
Popovers
Popovers are similar to tooltips in functionality expect they contain more content and include a header and are generally suited to being trigger on "click" although they support the same "trigger" options as Tooltips above.
Trigger them by adding a
data-bs-toggle="popover" data-bs-trigger="focus"se
attribute to any elements along with a
title="HEADER-TEXT-TO-SHOW-ON-HOVER"
and
data-bs-content="CONTENT-TEXT-TO-SHOW-ON-HOVER"
Example
Popover placement
Popovers support the same placement options as Tooltips above.
Trigger
Popovers support the same placement options as Tooltips above.
On hover
On focus (closes when other element is clicked)
Popover with HTML content
Like Tooltips to support HTML within the popover simply add the attribute
data-bs-html="true"
to the link element.