Material Design 3 "Tooltip" tokens: All tokens

Preview

Plain

Rich

Browse tokens

Tooltip - Plain

Enabled

Container

Container tokens
Token	Value
Plain tooltip container color`md.comp.plain-tooltip.container.color`	#322F35 `md.comp.plain-tooltip.container.color` `md.sys.color.inverse-surface` `md.ref.palette.neutral20`
Plain tooltip container shape`md.comp.plain-tooltip.container.shape`	4dp `md.comp.plain-tooltip.container.shape` `md.sys.shape.corner.extra-small`

Supporting text

Supporting text tokens
Token	Value
Plain tooltip supporting text color`md.comp.plain-tooltip.supporting-text.color`	#F5EFF7 `md.comp.plain-tooltip.supporting-text.color` `md.sys.color.inverse-on-surface` `md.ref.palette.neutral95`
Plain tooltip supporting text font`md.comp.plain-tooltip.supporting-text.font`	Roboto `md.comp.plain-tooltip.supporting-text.font` `md.sys.typescale.body-small.font` `md.ref.typeface.plain`
Plain tooltip supporting text line height`md.comp.plain-tooltip.supporting-text.line-height`	16pt `md.comp.plain-tooltip.supporting-text.line-height` `md.sys.typescale.body-small.line-height`
Plain tooltip supporting text size`md.comp.plain-tooltip.supporting-text.size`	12pt `md.comp.plain-tooltip.supporting-text.size` `md.sys.typescale.body-small.size`
Plain tooltip supporting text tracking`md.comp.plain-tooltip.supporting-text.tracking`	0.4pt `md.comp.plain-tooltip.supporting-text.tracking` `md.sys.typescale.body-small.tracking`
Supporting text type style`md.comp.plain-tooltip.supporting-text.type`	Roboto · 12pt · weight 400 · line height 16pt · tracking 0.4pt `md.comp.plain-tooltip.supporting-text.type` `md.comp.plain-tooltip.supporting-text.font` `md.sys.typescale.body-small.font` `md.ref.typeface.plain` `md.comp.plain-tooltip.supporting-text.weight` `md.sys.typescale.body-small.weight` `md.ref.typeface.weight-regular` `md.comp.plain-tooltip.supporting-text.size` `md.sys.typescale.body-small.size` `md.comp.plain-tooltip.supporting-text.line-height` `md.sys.typescale.body-small.line-height` `md.comp.plain-tooltip.supporting-text.tracking` `md.sys.typescale.body-small.tracking`
Plain tooltip supporting text weight`md.comp.plain-tooltip.supporting-text.weight`	400 `md.comp.plain-tooltip.supporting-text.weight` `md.sys.typescale.body-small.weight` `md.ref.typeface.weight-regular`

Tooltip - Rich

Enabled

Container

Container tokens
Token	Value
Rich tooltip container color`md.comp.rich-tooltip.container.color`	#F3EDF7 `md.comp.rich-tooltip.container.color` `md.sys.color.surface-container` `md.ref.palette.neutral94`
Rich tooltip container elevation`md.comp.rich-tooltip.container.elevation`	3dp `md.comp.rich-tooltip.container.elevation` `md.sys.elevation.level2`
Rich tooltip container shadow color`md.comp.rich-tooltip.container.shadow-color`	#000000 `md.comp.rich-tooltip.container.shadow-color` `md.sys.color.shadow` `md.ref.palette.neutral0`
Rich tooltip container shape`md.comp.rich-tooltip.container.shape`	12dp `md.comp.rich-tooltip.container.shape` `md.sys.shape.corner.medium`
Rich tooltip container surface tint layer color`md.comp.rich-tooltip.container.surface-tint-layer.color`	#6750A4 `md.comp.rich-tooltip.container.surface-tint-layer.color` `md.sys.color.surface-tint` `md.sys.color.primary` `md.ref.palette.primary40`

Label text

Label text tokens
Token	Value
Rich tooltip action label text color`md.comp.rich-tooltip.action.label-text.color`	#6750A4 `md.comp.rich-tooltip.action.label-text.color` `md.sys.color.primary` `md.ref.palette.primary40`
Rich tooltip action label text font`md.comp.rich-tooltip.action.label-text.font`	Roboto `md.comp.rich-tooltip.action.label-text.font` `md.sys.typescale.label-large.font` `md.ref.typeface.plain`
Rich tooltip action label text line height`md.comp.rich-tooltip.action.label-text.line-height`	20pt `md.comp.rich-tooltip.action.label-text.line-height` `md.sys.typescale.label-large.line-height`
Rich tooltip action label text size`md.comp.rich-tooltip.action.label-text.size`	14pt `md.comp.rich-tooltip.action.label-text.size` `md.sys.typescale.label-large.size`
Rich tooltip action label text tracking`md.comp.rich-tooltip.action.label-text.tracking`	0.1pt `md.comp.rich-tooltip.action.label-text.tracking` `md.sys.typescale.label-large.tracking`
Type style`md.comp.rich-tooltip.action.label-text.type`	Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt `md.comp.rich-tooltip.action.label-text.type` `md.comp.rich-tooltip.action.label-text.font` `md.sys.typescale.label-large.font` `md.ref.typeface.plain` `md.comp.rich-tooltip.action.label-text.weight` `md.sys.typescale.label-large.weight` `md.ref.typeface.weight-medium` `md.comp.rich-tooltip.action.label-text.size` `md.sys.typescale.label-large.size` `md.comp.rich-tooltip.action.label-text.line-height` `md.sys.typescale.label-large.line-height` `md.comp.rich-tooltip.action.label-text.tracking` `md.sys.typescale.label-large.tracking`
Rich tooltip action label text weight`md.comp.rich-tooltip.action.label-text.weight`	500 `md.comp.rich-tooltip.action.label-text.weight` `md.sys.typescale.label-large.weight` `md.ref.typeface.weight-medium`

Subhead

Subhead tokens
Token	Value
Rich tooltip subhead color`md.comp.rich-tooltip.subhead.color`	#49454F `md.comp.rich-tooltip.subhead.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30`
Rich tooltip subhead font`md.comp.rich-tooltip.subhead.font`	Roboto `md.comp.rich-tooltip.subhead.font` `md.sys.typescale.title-small.font` `md.ref.typeface.plain`
Rich tooltip subhead line height`md.comp.rich-tooltip.subhead.line-height`	20pt `md.comp.rich-tooltip.subhead.line-height` `md.sys.typescale.title-small.line-height`
Rich tooltip subhead size`md.comp.rich-tooltip.subhead.size`	14pt `md.comp.rich-tooltip.subhead.size` `md.sys.typescale.title-small.size`
Rich tooltip subhead tracking`md.comp.rich-tooltip.subhead.tracking`	0.1pt `md.comp.rich-tooltip.subhead.tracking` `md.sys.typescale.title-small.tracking`
Type style`md.comp.rich-tooltip.subhead.type`	Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt `md.comp.rich-tooltip.subhead.type` `md.comp.rich-tooltip.subhead.font` `md.sys.typescale.title-small.font` `md.ref.typeface.plain` `md.comp.rich-tooltip.subhead.weight` `md.sys.typescale.title-small.weight` `md.ref.typeface.weight-medium` `md.comp.rich-tooltip.subhead.size` `md.sys.typescale.title-small.size` `md.comp.rich-tooltip.subhead.line-height` `md.sys.typescale.title-small.line-height` `md.comp.rich-tooltip.subhead.tracking` `md.sys.typescale.title-small.tracking`
Rich tooltip subhead weight`md.comp.rich-tooltip.subhead.weight`	500 `md.comp.rich-tooltip.subhead.weight` `md.sys.typescale.title-small.weight` `md.ref.typeface.weight-medium`

Supporting text

Supporting text tokens
Token	Value
Rich tooltip supporting text color`md.comp.rich-tooltip.supporting-text.color`	#49454F `md.comp.rich-tooltip.supporting-text.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30`
Rich tooltip supporting text font`md.comp.rich-tooltip.supporting-text.font`	Roboto `md.comp.rich-tooltip.supporting-text.font` `md.sys.typescale.body-medium.font` `md.ref.typeface.plain`
Rich tooltip supporting text line height`md.comp.rich-tooltip.supporting-text.line-height`	20pt `md.comp.rich-tooltip.supporting-text.line-height` `md.sys.typescale.body-medium.line-height`
Rich tooltip supporting text size`md.comp.rich-tooltip.supporting-text.size`	14pt `md.comp.rich-tooltip.supporting-text.size` `md.sys.typescale.body-medium.size`
Rich tooltip supporting text tracking`md.comp.rich-tooltip.supporting-text.tracking`	0.25pt `md.comp.rich-tooltip.supporting-text.tracking` `md.sys.typescale.body-medium.tracking`
Type style`md.comp.rich-tooltip.supporting-text.type`	Roboto · 14pt · weight 400 · line height 20pt · tracking 0.25pt `md.comp.rich-tooltip.supporting-text.type` `md.comp.rich-tooltip.supporting-text.font` `md.sys.typescale.body-medium.font` `md.ref.typeface.plain` `md.comp.rich-tooltip.supporting-text.weight` `md.sys.typescale.body-medium.weight` `md.ref.typeface.weight-regular` `md.comp.rich-tooltip.supporting-text.size` `md.sys.typescale.body-medium.size` `md.comp.rich-tooltip.supporting-text.line-height` `md.sys.typescale.body-medium.line-height` `md.comp.rich-tooltip.supporting-text.tracking` `md.sys.typescale.body-medium.tracking`
Rich tooltip supporting text weight`md.comp.rich-tooltip.supporting-text.weight`	400 `md.comp.rich-tooltip.supporting-text.weight` `md.sys.typescale.body-medium.weight` `md.ref.typeface.weight-regular`

Hovered

Label text

Label text tokens
Token	Value
Rich tooltip action hover label text color`md.comp.rich-tooltip.action.hover.label-text.color`	#6750A4 `md.comp.rich-tooltip.action.hover.label-text.color` `md.sys.color.primary` `md.ref.palette.primary40`

State layer

State layer tokens
Token	Value
Rich tooltip action hover state layer color`md.comp.rich-tooltip.action.hover.state-layer.color`	#6750A4 `md.comp.rich-tooltip.action.hover.state-layer.color` `md.sys.color.primary` `md.ref.palette.primary40`
Rich tooltip action hover state layer opacity`md.comp.rich-tooltip.action.hover.state-layer.opacity`	8% `md.comp.rich-tooltip.action.hover.state-layer.opacity` `md.sys.state.hover.state-layer-opacity`

Focused

Label text

Label text tokens
Token	Value
Rich tooltip action focus label text color`md.comp.rich-tooltip.action.focus.label-text.color`	#6750A4 `md.comp.rich-tooltip.action.focus.label-text.color` `md.sys.color.primary` `md.ref.palette.primary40`

State layer

State layer tokens
Token	Value
Rich tooltip action focus state layer color`md.comp.rich-tooltip.action.focus.state-layer.color`	#6750A4 `md.comp.rich-tooltip.action.focus.state-layer.color` `md.sys.color.primary` `md.ref.palette.primary40`
Rich tooltip action focus state layer opacity`md.comp.rich-tooltip.action.focus.state-layer.opacity`	10% `md.comp.rich-tooltip.action.focus.state-layer.opacity` `md.sys.state.focus.state-layer-opacity`

Pressed (ripple)

Label text

Label text tokens
Token	Value
Rich tooltip action pressed label text color`md.comp.rich-tooltip.action.pressed.label-text.color`	#6750A4 `md.comp.rich-tooltip.action.pressed.label-text.color` `md.sys.color.primary` `md.ref.palette.primary40`

State layer

State layer tokens
Token	Value
Rich tooltip action pressed state layer color`md.comp.rich-tooltip.action.pressed.state-layer.color`	#6750A4 `md.comp.rich-tooltip.action.pressed.state-layer.color` `md.sys.color.primary` `md.ref.palette.primary40`
Rich tooltip action pressed state layer opacity`md.comp.rich-tooltip.action.pressed.state-layer.opacity`	10% `md.comp.rich-tooltip.action.pressed.state-layer.opacity` `md.sys.state.pressed.state-layer-opacity`