---
url: /components/tooltips/specs.md
description: >-
  Tooltips display brief labels or messages. Tooltips are informative, specific,
  and action-oriented text labels that provide contextual support
---

# Tooltips

Tooltips display brief labels or messages. Tooltips are informative, specific, and action-oriented text labels that provide contextual support

[Overview](overview.md) · **Specs** · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

## Tokens & specs

Select a component variant below to see its attributes, tokens, and values.

::: token-table token-table-37697297db0555a6-0584566b
**Tooltips tokens** · 2 token sets · 44 tokens · [live token table](https://m3.material.io/components/tooltips/specs) · DSDB `TOKEN_TABLE.37697297db0555a6`

* Default context: Theme: Light · Platform: Android · Audience: 3P · Font: Static · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
* Not configurable here (group default used): Motion scheme: Standard · Language height: Small
* Other contexts: Theme: Dark · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
* Reference chain: aliases from the token to its source value (`token → alias → … → value`). "—" means the token holds a literal value.

**Tooltip - Plain** · `md.comp.plain-tooltip` · 9 tokens

For plain tooltips.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Enabled › Container | `md.comp.plain-tooltip.container.color` | Color | `md.sys.color.inverse-surface` → `md.ref.palette.neutral20` | `#322F35` | Dark: `#E6E0E9` via `md.ref.palette.neutral90` |
| Enabled › Container | `md.comp.plain-tooltip.container.shape` | Shape | `md.sys.shape.corner.extra-small` | `Rounded corners 4dp` | — |
| Enabled › Supporting text | `md.comp.plain-tooltip.supporting-text.font` | Font names | `md.sys.typescale.body-small.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Enabled › Supporting text | `md.comp.plain-tooltip.supporting-text.line-height` | Line height | `md.sys.typescale.body-small.line-height` | `16pt` | — |
| Enabled › Supporting text | `md.comp.plain-tooltip.supporting-text.size` | Font size | `md.sys.typescale.body-small.size` | `12pt` | — |
| Enabled › Supporting text | `md.comp.plain-tooltip.supporting-text.weight` | Font weight | `md.sys.typescale.body-small.weight` → `md.ref.typeface.weight-regular` | `400` | — |
| Enabled › Supporting text | `md.comp.plain-tooltip.supporting-text.tracking` | Font tracking | `md.sys.typescale.body-small.tracking` | `0.4pt` | — |
| Enabled › Supporting text | `md.comp.plain-tooltip.supporting-text.type` | Typography | composite<br>font names: `md.comp.plain-tooltip.supporting-text.font` → `md.sys.typescale.body-small.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.plain-tooltip.supporting-text.weight` → `md.sys.typescale.body-small.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.plain-tooltip.supporting-text.size` → `md.sys.typescale.body-small.size`<br>line height: `md.comp.plain-tooltip.supporting-text.line-height` → `md.sys.typescale.body-small.line-height`<br>font tracking: `md.comp.plain-tooltip.supporting-text.tracking` → `md.sys.typescale.body-small.tracking` | `Roboto · weight 400 · size 12pt · line height 16pt · tracking 0.4pt` | — |
| Enabled › Supporting text | `md.comp.plain-tooltip.supporting-text.color` | Color | `md.sys.color.inverse-on-surface` → `md.ref.palette.neutral95` | `#F5EFF7` | Dark: `#322F35` via `md.ref.palette.neutral20`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>High contrast: `#FFFFFF` via `md.ref.palette.neutral100` |

**Tooltip - Rich** · `md.comp.rich-tooltip` · 35 tokens

For rich tooltips.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Enabled › Container | `md.comp.rich-tooltip.container.color` | Color | `md.sys.color.surface-container` → `md.ref.palette.neutral94` | `#F3EDF7` | Dark: `#211F26` via `md.ref.palette.neutral12` |
| Enabled › Container | `md.comp.rich-tooltip.container.elevation` | Elevation | `md.sys.elevation.level2` | `3dp` | — |
| Enabled › Container | `md.comp.rich-tooltip.container.surface-tint-layer.color` (deprecated) | Color | `md.sys.color.surface-tint` → `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled › Container | `md.comp.rich-tooltip.container.shadow-color` | Color | `md.sys.color.shadow` → `md.ref.palette.neutral0` | `#000000` | — |
| Enabled › Container | `md.comp.rich-tooltip.container.shape` | Shape | `md.sys.shape.corner.medium` | `Rounded corners 12dp` | — |
| Enabled › Label text | `md.comp.rich-tooltip.action.label-text.font` | Font names | `md.sys.typescale.label-large.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Enabled › Label text | `md.comp.rich-tooltip.action.label-text.line-height` | Line height | `md.sys.typescale.label-large.line-height` | `20pt` | — |
| Enabled › Label text | `md.comp.rich-tooltip.action.label-text.size` | Font size | `md.sys.typescale.label-large.size` | `14pt` | — |
| Enabled › Label text | `md.comp.rich-tooltip.action.label-text.weight` | Font weight | `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium` | `500` | — |
| Enabled › Label text | `md.comp.rich-tooltip.action.label-text.tracking` | Font tracking | `md.sys.typescale.label-large.tracking` | `0.1pt` | — |
| Enabled › Label text | `md.comp.rich-tooltip.action.label-text.type` | Typography | composite<br>font names: `md.comp.rich-tooltip.action.label-text.font` → `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.rich-tooltip.action.label-text.weight` → `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.rich-tooltip.action.label-text.size` → `md.sys.typescale.label-large.size`<br>line height: `md.comp.rich-tooltip.action.label-text.line-height` → `md.sys.typescale.label-large.line-height`<br>font tracking: `md.comp.rich-tooltip.action.label-text.tracking` → `md.sys.typescale.label-large.tracking` | `Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt` | — |
| Enabled › Label text | `md.comp.rich-tooltip.action.label-text.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled › Subhead | `md.comp.rich-tooltip.subhead.font` | Font names | `md.sys.typescale.title-small.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Enabled › Subhead | `md.comp.rich-tooltip.subhead.line-height` | Line height | `md.sys.typescale.title-small.line-height` | `20pt` | — |
| Enabled › Subhead | `md.comp.rich-tooltip.subhead.size` | Font size | `md.sys.typescale.title-small.size` | `14pt` | — |
| Enabled › Subhead | `md.comp.rich-tooltip.subhead.weight` | Font weight | `md.sys.typescale.title-small.weight` → `md.ref.typeface.weight-medium` | `500` | — |
| Enabled › Subhead | `md.comp.rich-tooltip.subhead.tracking` | Font tracking | `md.sys.typescale.title-small.tracking` | `0.1pt` | — |
| Enabled › Subhead | `md.comp.rich-tooltip.subhead.type` | Typography | composite<br>font names: `md.comp.rich-tooltip.subhead.font` → `md.sys.typescale.title-small.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.rich-tooltip.subhead.weight` → `md.sys.typescale.title-small.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.rich-tooltip.subhead.size` → `md.sys.typescale.title-small.size`<br>line height: `md.comp.rich-tooltip.subhead.line-height` → `md.sys.typescale.title-small.line-height`<br>font tracking: `md.comp.rich-tooltip.subhead.tracking` → `md.sys.typescale.title-small.tracking` | `Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt` | — |
| Enabled › Subhead | `md.comp.rich-tooltip.subhead.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Enabled › Supporting text | `md.comp.rich-tooltip.supporting-text.font` | Font names | `md.sys.typescale.body-medium.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Enabled › Supporting text | `md.comp.rich-tooltip.supporting-text.line-height` | Line height | `md.sys.typescale.body-medium.line-height` | `20pt` | — |
| Enabled › Supporting text | `md.comp.rich-tooltip.supporting-text.size` | Font size | `md.sys.typescale.body-medium.size` | `14pt` | — |
| Enabled › Supporting text | `md.comp.rich-tooltip.supporting-text.weight` | Font weight | `md.sys.typescale.body-medium.weight` → `md.ref.typeface.weight-regular` | `400` | — |
| Enabled › Supporting text | `md.comp.rich-tooltip.supporting-text.tracking` | Font tracking | `md.sys.typescale.body-medium.tracking` | `0.25pt` | — |
| Enabled › Supporting text | `md.comp.rich-tooltip.supporting-text.type` | Typography | composite<br>font names: `md.comp.rich-tooltip.supporting-text.font` → `md.sys.typescale.body-medium.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.rich-tooltip.supporting-text.weight` → `md.sys.typescale.body-medium.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.rich-tooltip.supporting-text.size` → `md.sys.typescale.body-medium.size`<br>line height: `md.comp.rich-tooltip.supporting-text.line-height` → `md.sys.typescale.body-medium.line-height`<br>font tracking: `md.comp.rich-tooltip.supporting-text.tracking` → `md.sys.typescale.body-medium.tracking` | `Roboto · weight 400 · size 14pt · line height 20pt · tracking 0.25pt` | — |
| Enabled › Supporting text | `md.comp.rich-tooltip.supporting-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered › Label text | `md.comp.rich-tooltip.action.hover.label-text.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Hovered › State layer | `md.comp.rich-tooltip.action.hover.state-layer.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Hovered › State layer | `md.comp.rich-tooltip.action.hover.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Focused › Label text | `md.comp.rich-tooltip.action.focus.label-text.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Focused › State layer | `md.comp.rich-tooltip.action.focus.state-layer.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Focused › State layer | `md.comp.rich-tooltip.action.focus.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Pressed (ripple) › Label text | `md.comp.rich-tooltip.action.pressed.label-text.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Pressed (ripple) › State layer | `md.comp.rich-tooltip.action.pressed.state-layer.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Pressed (ripple) › State layer | `md.comp.rich-tooltip.action.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
:::

## Plain tooltip

![2 elements of a plain tooltip.](/assets/f9c2af6a-mg6beegk-01-3p.BFBN-UlI.webp)

1. Supporting text
2. Container

### Plain tooltip colors

Color values are implemented through [design tokens](../../foundations/design-tokens/overview.md "Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code."). For design, this means working with color values that correspond with tokens. For implementation, a color value will be a token that references a value. [Learn more about design tokens](../../foundations/design-tokens/overview.md)

![2 color roles of a plain tooltip.](/assets/71287c7a-mg6bfggt-02-3p.Demtk5ZK.webp)

Plain tooltip color roles used for light and dark themes:

1. Inverse on surface
2. Inverse surface

### Plain tooltip measurements

![Measurements of a plain tooltip.](/assets/46fc495b-mg6bgjww-03-3p.DNU-ZLk2.webp)

Plain tooltip padding and size measurements

|     Attribute    | Value |
| :--------------: | :---: |
| Container height |  24dp |
|      Padding     |  8dp  |

## Rich tooltip

![4 elements of a rich tooltip.](/assets/62592b2f-mg6bgxay-04-3p.C2nFcn9P.webp)

1. Subhead
2. Container
3. Supporting text
4. Text button

### Rich tooltip colors

Color values are implemented through [design tokens](../../foundations/design-tokens/overview.md "Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code."). For design, this means working with color values that correspond with tokens. For implementation, a color value will be a token that references a value. [Learn more about design tokens](../../foundations/design-tokens/overview.md)

![4 color roles of a rich tooltip.](/assets/6f37ebd3-mg6bi2oc-05-3p.G2Z7jylx.webp)

Rich tooltip color roles used for light and dark themes:

1. On surface variant 
2. Surface container
3. On surface variant 
4. Primary

### Rich tooltip measurements

![Measurements of a rich tooltip.](/assets/9a5a3351-mg6big7s-06-3p.B_hlXaLN.webp)

Rich tooltip padding and size measurements

|        Attribute       | Value |
| :--------------------: | :---: |
|       Top padding      |  12dp |
|     Bottom padding     |  8dp  |
| Left and right padding |  16dp |

### Rich tooltip configurations

Rich tooltips can have a headline, body, and up to two [buttons](../buttons/overview.md "Buttons let people take action and make choices with one tap."). The headline and number of buttons can be configured.

![5 common configurations of a rich tooltip.](/assets/c7fccdad-mg6biuoq-07-3p.BRWZubge.webp)

1. Subhead, supporting text, and two buttons
2. Subhead, supporting text, and one button
3. Subhead and supporting text
4. Supporting text and one button
5. Supporting text and two buttons