Tooltip displays supportive, text-only information when a user hovers over a selected element.
Its position can be set via the props (see the Code tab).
When to use a Tooltip vs a Title
Tooltips and the title attribute serve different purposes in the interface, and choosing the right one helps create clear, predictable, accessible experiences.
- Tooltips are for displaying optional supporting information (from 4 words to 2 sentences) that is helpful but not critical for the user to complete their primary task.
- A title element is best for a short name or title (~1–3 words). It is much more subtle than a Tooltip and helps to label visual elements, like an icon-only Button, or to reveal the full text of a truncated label, like a file name in the File Upload component.
See more details, including when to use a Popover, in the Usage tab.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Container |
Container for the Tooltip content |
No |
|
2. Content |
Text-based description |
No |
|
3. Arrow |
Points to and is positioned closely next to the element that the Tooltip is associated with. Can be 1 of 4 directions: left, right, top, bottom; depending on where the element sits on the page and/or user’s browser. |
No |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| ✏️ content Text | string | This is a tooltip |
| arrowPosition Variant | bottom | left | right | top | bottom |
Help and support