When activated, tooltips display a text label identifying an element, such as a description of its function.
Tooltips are transient, paired, and succinct.
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.
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.
- Tooltip disappears when cursor moves out of the touch target
- Tooltip remains while cursor moves within the touch target
Reply Material Theme
This email app’s tooltips have been customized using Material Theming. Areas of customization include color, typography, and shape. Reply is an email app that uses...
This email app’s tooltips have been customized using Material Theming. Areas of customization include color, typography, and shape.
Reply’s tooltips use custom color on two elements: the container, and text string.
Reply’s tooltips use custom typography for the text string.
Reply’s tooltips use a custom container shape.
Top left corner
Top right corner
Bottom right corner
Bottom left corner
10dp #ffffff #616161e6 R97 G97 B97 A0.90 All corners Rounded: 4dp All measurements are displayed in device-independent pixels (dps)
14dp #ffffff #616161e6 R97 G97 B97 A0.90 All corners Rounded: 4dp All measurements are displayed in device-independent pixels (dps)