components
Tooltip (design)
A tooltip is a floating label that provide a brief explanation about a specific user interface element. It can be triggered when users hover, focus or tap.
Use a tooltip to help users understand the meaning of purpose of UI elements that aren't described directly like icons without labels.
Positioning
Tooltips can be positioned on both top or the bottom of a trigger and change left or right depending on how close the element is to the edge of the screen.
Behaviour
A tooltip is triggered or dismissed by:
- Hovering over an element
- Clicking or tapping
- Focusing on an element
When triggered, the tooltip will animate on entrance and exit.
Guidelines
- Tooltips should be concise, helpful and supplemental.
- Tooltips have a max-width of 230px.
- Tooltips should be written in sentence case.
- Tooltips should contain only static content.