Tooltips

Tooltips display informative text when users hover over, focus on, or tap an element.


Usage

When activated, tooltips display a text label identifying an element, such as a description of its function.

Principles

Tooltips are transient, paired, and succinct.

Read More

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

  1. On hover
  2. On focus

Don’t.

Don’t use tooltips to restate visible UI text.

200% zoom

  1. On hover
  2. On focus

200% zoom

  1. Tooltips describe differences between similar elements
  2. Tooltips distinguish actions with related iconography

Don’t.

200% zoom

  1. Don’t display shadows on tooltips
  2. 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

Theming

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...

Read More

This email app’s tooltips have been customized using Material Theming. Areas of customization include color, typography, and shape.

Reply’s customized tooltip.

Color

Reply’s tooltips use custom color on two elements: the container, and text string.

Element

Category

Attribute

Value

Container

On Surface

Color

Opacity

#232F34

100%

Text string

Surface

Color

Opacity

#FFFFFF

100%

Typography

Reply’s tooltips use custom typography for the text string.

Element

Category

Attribute

Value

Text string

Caption

Typeface

Font

Size

Case

Work Sans

Regular

12

Sentence case

Shape

Reply’s tooltips use a custom container shape.

Element

Attribute

Value

Container

Top left corner

Top right corner

Bottom right corner

Bottom left corner

Sharp 0dp

Sharp 0dp

Sharp 0dp

Sharp 0dp


Spec

Desktop

10dp #ffffff #616161e6 R97 G97 B97 A0.90 All corners Rounded: 4dp All measurements are displayed in device-independent pixels (dps)

Read More
  • C
  • 8
  • 8
  • 24
  • #616161e6

    R97 G97 B97 A0.90

  • Shape

    All corners

    Rounded: 4dp

flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)

Mobile

14dp #ffffff #616161e6 R97 G97 B97 A0.90 All corners Rounded: 4dp All measurements are displayed in device-independent pixels (dps)

Read More
  • 32
  • 16
  • 16
  • C
  • #616161e6

    R97 G97 B97 A0.90

  • Shape

    All corners

    Rounded: 4dp

flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)


Implementation

Tooltips implementation support for each platform is indicated below.