Tooltips

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

Overview · Specs · Guidelines · Accessibility

Tokens & specs

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

Design tokens

Token table

Machine-readable relationship table

Tooltips tokens · 2 token sets · 44 tokens · live token table · 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 font names: md.comp.plain-tooltip.supporting-text.font → md.sys.typescale.body-small.font → md.ref.typeface.plain font weight: md.comp.plain-tooltip.supporting-text.weight → md.sys.typescale.body-small.weight → md.ref.typeface.weight-regular font size: md.comp.plain-tooltip.supporting-text.size → md.sys.typescale.body-small.size line height: md.comp.plain-tooltip.supporting-text.line-height → md.sys.typescale.body-small.line-height 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 Medium contrast: #FFFFFF via md.ref.palette.neutral100 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 font names: md.comp.rich-tooltip.action.label-text.font → md.sys.typescale.label-large.font → md.ref.typeface.plain font weight: md.comp.rich-tooltip.action.label-text.weight → md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium font size: md.comp.rich-tooltip.action.label-text.size → md.sys.typescale.label-large.size line height: md.comp.rich-tooltip.action.label-text.line-height → md.sys.typescale.label-large.line-height 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 font names: md.comp.rich-tooltip.subhead.font → md.sys.typescale.title-small.font → md.ref.typeface.plain font weight: md.comp.rich-tooltip.subhead.weight → md.sys.typescale.title-small.weight → md.ref.typeface.weight-medium font size: md.comp.rich-tooltip.subhead.size → md.sys.typescale.title-small.size line height: md.comp.rich-tooltip.subhead.line-height → md.sys.typescale.title-small.line-height 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 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 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 font names: md.comp.rich-tooltip.supporting-text.font → md.sys.typescale.body-medium.font → md.ref.typeface.plain font weight: md.comp.rich-tooltip.supporting-text.weight → md.sys.typescale.body-medium.weight → md.ref.typeface.weight-regular font size: md.comp.rich-tooltip.supporting-text.size → md.sys.typescale.body-medium.size line height: md.comp.rich-tooltip.supporting-text.line-height → md.sys.typescale.body-medium.line-height 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 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #4F378B via md.ref.palette.primary30 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

1. Supporting text
2. Container

Plain tooltip colors

Color values are implemented through design tokens. 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

Plain tooltip color roles used for light and dark themes:

1. Inverse on surface
2. Inverse surface

Plain tooltip measurements

Plain tooltip padding and size measurements

Attribute	Value
Container height	24dp
Padding	8dp

Rich tooltip

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

Rich tooltip colors

Color values are implemented through design tokens. 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

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

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. The headline and number of buttons can be configured.

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