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"
Some tooltip text
Right tooltip data-bs-placement="right"
Some tooltip text
Bottom tooltip data-bs-placement="bottom"
Some tooltip text
Left tooltip data-bs-placement="left"
Some tooltip text
| 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 |
