Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element.
Tooltips identify an element when they are activated. They may contain brief helper text about its function. For example, they may contain text information about actionable icons.
Tooltip labels do not receive input focus.
Use tooltips for interactive imagery.
Do.
Don’t.
Tooltips don’t display rich information including images and formatted text.
Tooltips are different than ALT-attributes, which are intended primarily for static images.
Tooltips don’t have directional arrows; instead, they rely on motion emanating from the source to convey direction.
Do.
Don’t.
A tooltip is triggered by tapping and holding an item. Keep the tooltip displayed as long as the user continues to hold the element.
On lift, display the tooltip for 1.5 seconds.
If the user takes another action before that time ends, the tooltip will disappear.
The tooltip entrance occurs over 150ms, using the Deceleration Curve. It also exits over 150ms, using the Acceleration Curve.
Text: Roboto Medium 10sp
Color: Grey 700
Opacity: 90%
Cursor/keyboard tooltips
Tile height: 22dp
Left and right text padding: 8dp
Top margin: 14dp
Example of cursor/keyboard tooltip
Text: Roboto Medium 14sp
Color: Grey 700
Opacity: 90%
Touch UI tooltips
Tile height: 32dp
Left and right text padding: 16dp
Top margin: 24dp
Example of Touch UI tooltips
Example of Touch UI tooltips
Example of Touch UI tooltips in a normal state
Example of Touch UI tooltips in a press and hold state