Tooltip component
Tooltip is a small text block with information about the item
being hovered, clicked or focused on. Bootstrap tooltip
extensions supports four alignment options: top,
right, bottom and left.
The tooltip plugin generates content and markup on demand, and
by default places tooltips after their trigger
element. The required markup for a tooltip is only a
data attribute and title on the HTML
element you wish to have a tooltip.
Top tooltip data-bs-placement="top"
Right tooltip data-bs-placement="right"
Bottom tooltip data-bs-placement="bottom"
Left tooltip data-bs-placement="left"
| Tooltip positions | ||
|---|---|---|
| Left tooltip position |
Tooltip in left direction. To use, add
data-bs-placement="left" to the tooltip
element
|
|
| Top position |
Tooltip in left direction. To use, add
data-bs-placement="left" to the tooltip
element
|
|
| Right position |
Tooltip in default top direction,
data-bs-placement="top" is optional
|
|
| Bottom position |
Tooltip in bottom direction. To use, add
data-bs-placement="bottom" to the tooltip
element
|
|
| Auto position |
When auto is specified, it will dynamically
reorient the popover
|
|
| Tooltip options | ||
| Click trigger |
Tooltip triggered on click. To use, add
data-bs-trigger="click" to the tooltip
element. To hide tooltip, click the same button again
|
|
| Focus trigger |
Use the focus trigger to dismiss tooltips
on the user’s next click of a different element than the
toggle element
|
|
| HTML support |
Insert HTML into the tooltip. If false,
innerText property will be used to insert
content into the DOM. Use text if you're worried about
XSS attacks.
|
|
| Disabled animation |
Add or remove a CSS fade transition to the
tooltip by setting data-bs-animation to
true (default) or false
|
|
| Delayed tooltip |
Delay showing and hiding the tooltip (ms) - does not
apply to manual trigger type. If a number
is supplied, delay is applied to both hide/show
|
|
| Custom color |
Tooltips support custom color styling through
template option. To use, wrap
.tooltip-arrow and
.tooltip-inner in the div with a custom
color class
|
|
| Tooltip events | ||
| Show event |
Example of a show event. This event fires
immediately when the show instance method
is called
|
|
| Shown event |
Example of a shown event. This event is
fired when the tooltip has been made visible to the user
|
|
| Hide event |
Example of a hide event. This event is
fired immediately when the hide instance
method has been called
|
|
| Hidden event |
Example of a hidden event. This event is
fired when the tooltip has finished being hidden from
the user
|
|
| Tooltip methods | ||
| Show method |
|
Example of a show method. This method
reveals an element's tooltip. Tooltips with zero-length
titles are never displayed
|
| Hide method |
|
Example of a hide method. This method hides
an element's tooltip. Hover on
Target button and then click
play button to hide a tooltip
|
| Toggle method |
|
Example of a toggle method. This method
toggles an element's tooltip. Click on
play button to toggle
Target button tooltip
|
| Dispose method |
|
Example of a dispose method. This method
hides and destroys an element's tooltip. Click on
Target button and then
play button to destroy a tooltip
|
| Enable/Disable methods |
|
Example of a toggleEnabled method. Toggles
the ability for an element’s tooltip to be shown or
hidden. Hover on Target button and then
play button to disable and enable a tooltip
|
