Anatomy
- Container: A bounding container that holds tooltip content
- Text Content: Text content of the tooltip
Usage Guidelines
When to use this component
- To provide a label for controls without one, such as Icon Buttons.
- To show non-essential, useful hints or descriptions for interactive elements.
- To reveal secondary details like truncated text that aren’t required to operate the interface.
When not to use this component
- To hide information that is essential for completing a task.
- When the control or element already has a clear visible label.
- To show more information on non-interactive elements.
- As a feedback mechanism (e.g. showing “Copied!” after clicking a copy button). Use Toast instead.
Best Practices
Use tooltip only with interactive elements e.g. providing text label for the Icon button.
Don’t use tooltips on non-interactive elements e.g. text, icons, containers.
Don’t hide vital information behind tooltips. Try to show content directly on the page e.g., use hints for inputs.
Don’t use interactive elements inside tooltips e.g. buttons or links. Users can’t interact with a tooltip.
Don't place long content inside a tooltip. Tooltips should be short and succinct.
General Component Behaviors
Display
Tooltip appears when hovering over it’s trigger, with a delay of 150ms.
Position
Tooltips automatically select the side with the most space, dynamically flipping if scrolling or resizing reveals a better position. Manual placement is possible, though forcing a specific side might cause the tooltip to extend beyond the viewport.
Alignment
Tooltips are centered relative to their trigger by default. If centering would push the tooltip outside the viewport, it shifts to stay fully visible.
Responsive Behavior
States
Tooltip alternatives
Although tooltips may seem like a good solution for providing additional content to users, they are rarely appropriate.
- They are hidden by default, making them easy to miss.
- If they are not used on focusable elements, they cannot be accessed via keyboard, creating accessibility issues.
We recommend finding an alternative approach and considering tooltips as a last resort.
Show content directly on the page
If the content is necessary to finish the task, or vastly benefits the user try to show it directly on the page.
Create new modality
Consider different components, e.g. a Modal to create a new detailed modality. This gives you more flexibility to put necessary content and provide better accessibility.
Use progressive disclosure
Instead of hiding information in the tooltip, provide a clear action to show and hide the content e.g, use a Collapse
Content Guidelines
For further information, see the Content Styleguide.
Known Gaps
- List of gaps that are known by the DS team and are being prioritized in the future