Tooltip
About
A Tooltip displays additional informative text in a floating way. A Tooltip appears when a user hovers over or focuses on an interface element that triggers it. A Tooltip usually explains the function of the that element.
Anatomy
A Tooltip consists of:
- A container
- A body text
- An arrow
When to use a Tooltip
A Tooltip can be used to give a short and concise explanation or clarification about the function of the interface element.
When not to use a Tooltip
- When a Tooltip will be used to provide critical information. Instead, use an Dialog, Alert or Toast notification;
- When you rely on tooltips while designing or developing for mobile devices. Instead, consider adding a label to the element or use a Popover.
Placement
The position of a Tooltip can be top, left, right or towards the bottom of the trigger element:
Behaviour
States
A Tooltip doesn’t come with states. It either appears or is hidden.
Default
By default, a Tooltip is hidden.
Interaction
A Tooltip appears on focus or when the element is hovered. It will disappear automatically when the focus on the element is lost or the mouse is moved.
Responsiveness
The positioning of the arrow behaves responsive in terms of adjusting its position according to the screen it’s used in. A Tooltip’s positioning will be recalculated if there is no available space for the defined position. A Tooltip will never go off screen.
Timing
A Tooltip appears after 300 milliseconds of hovering, to make sure users don’t get frustrated if they hover unintentionally. A Tooltip disappears after 100 milliseconds when the mouse leaves.
Keyboard behaviour
For focus on keyboard, the rule of thumb is that a Tooltip is displayed as long as the element is focused.
Content
Make a Tooltip label as concise as possible. Make sure it explains the function of the element. A label shouldn’t be needed.
Nesting components
A Tooltip can be used in:
- Notification pattern
- Panel component