Component

Material Design 3 tooltips tokens

Browse tokens

Token

See more values

Compare token values by selecting another context

Theme
Contrast
More contexts
Platform
Audience
What do 1P and 3P mean?

1P means first-party; 3P means third-party. We interpret 1P Baseline as the configuration for Google's own products, and 3P as the configuration for other developers.

Material supplies these audience labels but does not define them in the captured data. They are not a baseline-versus-Expressive switch.

Font

Enabled
Container
Container tokens
TokenValue
Rich tooltip container colormd.comp.rich-tooltip.container.color
#F3EDF7
Rich tooltip container elevationmd.comp.rich-tooltip.container.elevation
3dp
Rich tooltip container surface tint layer colormd.comp.rich-tooltip.container.surface-tint-layer.color
#6750A4
Rich tooltip container shadow colormd.comp.rich-tooltip.container.shadow-color
#000000
Rich tooltip container shapemd.comp.rich-tooltip.container.shape
12dp
Label text
Label text tokens
TokenValue
Rich tooltip action label text fontmd.comp.rich-tooltip.action.label-text.font
Roboto
Rich tooltip action label text line heightmd.comp.rich-tooltip.action.label-text.line-height
20pt
Rich tooltip action label text sizemd.comp.rich-tooltip.action.label-text.size
14pt
Rich tooltip action label text weightmd.comp.rich-tooltip.action.label-text.weight
500
Rich tooltip action label text trackingmd.comp.rich-tooltip.action.label-text.tracking
0.1pt
Type stylemd.comp.rich-tooltip.action.label-text.type
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
Rich tooltip action label text colormd.comp.rich-tooltip.action.label-text.color
#6750A4
Subhead
Subhead tokens
TokenValue
Rich tooltip subhead fontmd.comp.rich-tooltip.subhead.font
Roboto
Rich tooltip subhead line heightmd.comp.rich-tooltip.subhead.line-height
20pt
Rich tooltip subhead sizemd.comp.rich-tooltip.subhead.size
14pt
Rich tooltip subhead weightmd.comp.rich-tooltip.subhead.weight
500
Rich tooltip subhead trackingmd.comp.rich-tooltip.subhead.tracking
0.1pt
Type stylemd.comp.rich-tooltip.subhead.type
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
Rich tooltip subhead colormd.comp.rich-tooltip.subhead.color
#49454F
Supporting text
Supporting text tokens
TokenValue
Rich tooltip supporting text fontmd.comp.rich-tooltip.supporting-text.font
Roboto
Rich tooltip supporting text line heightmd.comp.rich-tooltip.supporting-text.line-height
20pt
Rich tooltip supporting text sizemd.comp.rich-tooltip.supporting-text.size
14pt
Rich tooltip supporting text weightmd.comp.rich-tooltip.supporting-text.weight
400
Rich tooltip supporting text trackingmd.comp.rich-tooltip.supporting-text.tracking
0.25pt
Type stylemd.comp.rich-tooltip.supporting-text.type
Roboto · 14pt · weight 400 · line height 20pt · tracking 0.25pt
Rich tooltip supporting text colormd.comp.rich-tooltip.supporting-text.color
#49454F
Hovered
Label text
Label text tokens
TokenValue
Rich tooltip action hover label text colormd.comp.rich-tooltip.action.hover.label-text.color
#6750A4
State layer
State layer tokens
TokenValue
Rich tooltip action hover state layer colormd.comp.rich-tooltip.action.hover.state-layer.color
#6750A4
Rich tooltip action hover state layer opacitymd.comp.rich-tooltip.action.hover.state-layer.opacity
8%
Focused
Label text
Label text tokens
TokenValue
Rich tooltip action focus label text colormd.comp.rich-tooltip.action.focus.label-text.color
#6750A4
State layer
State layer tokens
TokenValue
Rich tooltip action focus state layer colormd.comp.rich-tooltip.action.focus.state-layer.color
#6750A4
Rich tooltip action focus state layer opacitymd.comp.rich-tooltip.action.focus.state-layer.opacity
10%
Pressed (ripple)
Label text
Label text tokens
TokenValue
Rich tooltip action pressed label text colormd.comp.rich-tooltip.action.pressed.label-text.color
#6750A4
State layer
State layer tokens
TokenValue
Rich tooltip action pressed state layer colormd.comp.rich-tooltip.action.pressed.state-layer.color
#6750A4
Rich tooltip action pressed state layer opacitymd.comp.rich-tooltip.action.pressed.state-layer.opacity
10%