When activated, tooltips display a text label identifying an element, such as a description of its function.
Principles
Transient
Tooltips appear on hover, focus, or touch, and disappear after a short duration.
Paired
Tooltips are always paired nearby the element with which they are associated.
Succinct
Tooltips only include short, descriptive text.
Placement
【Do】Use tooltips for interactive imagery.
200% zoom
On hover
On focus
【Don’t】Don’t use tooltips to restate visible UI text.
200% zoom
On hover
On focus
200% zoom
Tooltips describe differences between similar elements
Tooltips distinguish actions with related iconography
【Don’t】200% zoom
Don’t display shadows on tooltips
Don’t display rich information and imagery on tooltips
【Do】Keep the position of the tooltip visible.
【Don’t】Don’t crop tooltips.
Desktop
Desktop tooltip on hover
Mobile
Tooltip displayed through long press
Tooltip summoned through focus (Android only)
Behavior
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.
Timing
Display the tooltip for 1.5 seconds. If the user takes another action before that time ends, the tooltip will disappear.
Motion
Over 150ms, tooltips fade in and scale up using the deceleration curve. They fade out over 75ms.
1. 200% 2. 100%
On desktop, tooltips appear in the center of click targets and stay in place while cursor moves within the target.
1. Tooltip disappears when cursor moves out of the touch target 2. Tooltip remains while cursor moves within the touch target
