# Tooltips

{% embed url="<https://material.io/components/tooltips/>" %}

<div align="left"><img src="https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F0B54x0KDcs5U-WU50SUpxSnZ1dHM%2Ftooltips-intro.png" alt=""></div>

## Usage&#x20;

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

<div align="left"><img src="https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F0B54x0KDcs5U-OHl1djU3UGlVTDg%2Ftooltip-usage.png" alt="【Do】Use tooltips for interactive imagery."></div>

200% zoom

1. On hover
2. On focus

<div align="left"><img src="https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F0B54x0KDcs5U-bkwya0lJUGdQemM%2Ftooltip-usage-dont.png" alt="【Don’t】Don’t use tooltips to restate visible UI text."></div>

200% zoom

1. On hover
2. On focus

<div align="left"><img src="https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F0B54x0KDcs5U-a0Vrdnlib1R5TFk%2Ftooltip-usage-do.png" alt=""></div>

200% zoom

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

<div align="left"><img src="https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F0B54x0KDcs5U-akZBRno3UmRkeVU%2Ftooltip-usage-dont-2.png" alt="【Don’t】200% zoom"></div>

1. Don’t display shadows on tooltips
2. Don’t display rich information and imagery on tooltips

<div align="left"><img src="https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F0B54x0KDcs5U-TXJwMkFpZU9abWc%2Ftooltip-position-do.png" alt="【Do】Keep the position of the tooltip visible."></div>

<div align="left"><img src="https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F0B54x0KDcs5U-OG9NelYyTm9GUHc%2Ftooltip-position-dont.png" alt="【Don’t】Don’t crop tooltips."></div>

### Desktop

<div align="left"><img src="https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F0B54x0KDcs5U-Z1dSQVRTbTF2QlE%2Ftooltip-desktop.png" alt="Desktop tooltip on hover"></div>

###

### Mobile

{% embed url="<https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F0B8wSqcLwbhFuZVFJeXRLd3hlM0E%2Fbaseline-video-list.mp4>" %}
Tooltip displayed through long press
{% endembed %}

{% embed url="<https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F0B8wSqcLwbhFuRzZGQVd4MFVfMlU%2Fbaseline-video-list-focus.mp4>" %}
Tooltip summoned through focus (Android only)
{% endembed %}

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

{% embed url="<https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F0B8wSqcLwbhFuYlpHNGcxdXRfZkE%2F01-tooltip-interaction.mp4>" %}
1\. 200%    2. 100%
{% endembed %}

On desktop, tooltips appear in the center of click targets and stay in place while cursor moves within the target.

{% embed url="<https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F0B8wSqcLwbhFuVHlsVnNvV1MwdWM%2F02-tooltip-interaction.mp4>" %}
1\. Tooltip disappears when cursor moves out of the touch target    2. Tooltip remains while cursor moves within the touch target
{% endembed %}