Tooltips
Tooltips display informative text when users hover over, focus on, or tap an element.
Last updated
Was this helpful?
Tooltips display informative text when users hover over, focus on, or tap an element.
Last updated
Was this helpful?
When activated, tooltips display a text label identifying an element, such as a description of its function.
Tooltips appear on hover, focus, or touch, and disappear after a short duration.
Tooltips are always paired nearby the element with which they are associated.
Tooltips only include short, descriptive text.
200% zoom
On hover
On focus
200% zoom
On hover
On focus
200% zoom
Tooltips describe differences between similar elements
Tooltips distinguish actions with related iconography
Don’t display shadows on tooltips
Don’t display rich information and imagery on tooltips
A tooltip is displayed upon tapping and holding a screen element or component (on mobile) or hovering over it (desktop). Continuously display the tooltip as long as the user long-presses or hovers over the element.
Display the tooltip for 1.5 seconds. If the user takes another action before that time ends, the tooltip will disappear.
Over 150ms, tooltips fade in and scale up using the deceleration curve. They fade out over 75ms.
On desktop, tooltips appear in the center of click targets and stay in place while cursor moves within the target.
