The Tooltip component is a small popup that shows up when a user hovers over an element with their mouse pointer.
To add a tooltip, include the data-bs-toggle="tooltip" attribute on the desired element.
Set the text for the tooltip using the title attribute on the element.
Important: Tooltips need to be activated using JavaScript for them to function.
The code below activates all tooltips across the entire page:
| Attribute | Description | Example Usage |
|---|---|---|
href |
Specifies the URL or section the link will navigate to. | <a href="#section">Go to Section</a> |
data-bs-toggle |
Used to trigger Bootstrap components like modals, dropdowns, tooltips, etc. | <button data-bs-toggle="modal">Open Modal</button> |
data-bs-placement |
Specifies the position of tooltips/popovers (top, bottom, left, right). | <button data-bs-placement="top" title="Info">Hover Me</button> |
Tooltips are shown above the element by default.
You can position the tooltip on the top, bottom, left, or right of an element using the data-bs-placement attribute