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 |
