Tooltip

Tooltip exposes the shared tooltip surface for plain and rich treatments, with control over the underlying popover behavior.

Tooltip

Anatomy

Highlight

Element	Part	Selector
<div>	root	[data-scope="tooltip"][data-part="root"] left_clickLMBCopy

Props

Name	Description	Default	Control
variantOptional	The variant of the tooltip. plainrich	"plain"	checkplainrich
popoverOptional	The popover behavior of the tooltip. automanualhint	"hint"	automanualcheckhint

Events0

No events documented.

Slots1

Name	Parameters	Description
default	-	The default slot for the tooltip content.

Styling43

Preview

Token	Description
--md-plain-tooltip-container-colorColor Fallbackvar(--md-sys-color-inverse-surface)	Controls tooltip container color.
--md-plain-tooltip-container-shapeShape Fallbackvar(--md-shape-compact)	Controls tooltip container shape.
--md-plain-tooltip-supporting-text-colorColor Fallbackvar(--md-sys-color-inverse-on-surface)	Controls tooltip supporting text color.
--md-plain-tooltip-supporting-text-fontTypography Fallbackvar(--md-sys-typescale-body-small-font)	Controls tooltip supporting text font.
--md-plain-tooltip-supporting-text-line-heightTypography Fallbackvar(--md-sys-typescale-body-small-line-height)	Controls tooltip supporting text line height.
--md-plain-tooltip-supporting-text-sizeLayout Fallbackvar(--md-sys-typescale-body-small-size)	Controls tooltip supporting text size.
--md-plain-tooltip-supporting-text-trackingTypography Fallbackvar(--md-sys-typescale-body-small-tracking)	Controls tooltip supporting text tracking.
--md-plain-tooltip-supporting-text-typeTypography Fallbackvar(--md-sys-typescale-body-small)	Controls tooltip supporting text type.
--md-plain-tooltip-supporting-text-weightTypography Fallbackvar(--md-sys-typescale-body-small-weight)	Controls tooltip supporting text weight.
--md-rich-tooltip-action-focus-label-text-colorFocus Fallbackvar(--md-sys-color-primary)	Controls tooltip action focus label text color.
--md-rich-tooltip-action-focus-state-layer-colorFocus Fallbackvar(--md-sys-color-primary)	Controls tooltip action focus state layer color.
--md-rich-tooltip-action-focus-state-layer-opacityFocus Fallbackvar(--md-sys-state-focus-state-layer-opacity)	Controls tooltip action focus state layer opacity.
--md-rich-tooltip-action-hover-label-text-colorState Fallbackvar(--md-sys-color-primary)	Controls tooltip action hover label text color.
--md-rich-tooltip-action-hover-state-layer-colorState Fallbackvar(--md-sys-color-primary)	Controls tooltip action hover state layer color.
--md-rich-tooltip-action-hover-state-layer-opacityState Fallbackvar(--md-sys-state-hover-state-layer-opacity)	Controls tooltip action hover state layer opacity.
--md-rich-tooltip-action-label-text-colorColor Fallbackvar(--md-sys-color-primary)	Controls tooltip action label text color.
--md-rich-tooltip-action-label-text-fontTypography Fallbackvar(--md-sys-typescale-label-large-font)	Controls tooltip action label text font.
--md-rich-tooltip-action-label-text-line-heightTypography Fallbackvar(--md-sys-typescale-label-large-line-height)	Controls tooltip action label text line height.
--md-rich-tooltip-action-label-text-sizeLayout Fallbackvar(--md-sys-typescale-label-large-size)	Controls tooltip action label text size.
--md-rich-tooltip-action-label-text-trackingTypography Fallbackvar(--md-sys-typescale-label-large-tracking)	Controls tooltip action label text tracking.
--md-rich-tooltip-action-label-text-typeTypography Fallbackvar(--md-sys-typescale-label-large)	Controls tooltip action label text type.
--md-rich-tooltip-action-label-text-weightTypography Fallbackvar(--md-sys-typescale-label-large-weight)	Controls tooltip action label text weight.
--md-rich-tooltip-action-pressed-label-text-colorState Fallbackvar(--md-sys-color-primary)	Controls tooltip action pressed label text color.
--md-rich-tooltip-action-pressed-state-layer-colorState Fallbackvar(--md-sys-color-primary)	Controls tooltip action pressed state layer color.
--md-rich-tooltip-action-pressed-state-layer-opacityState Fallbackvar(--md-sys-state-pressed-state-layer-opacity)	Controls tooltip action pressed state layer opacity.
--md-rich-tooltip-container-colorColor Fallbackvar(--md-sys-color-surface-container)	Controls tooltip container color.
--md-rich-tooltip-container-elevationElevation Fallbackvar(--md-sys-elevation-level2)	Controls tooltip container elevation.
--md-rich-tooltip-container-shadow-colorColor Fallbackvar(--md-sys-color-shadow)	Controls tooltip container shadow color.
--md-rich-tooltip-container-shapeShape Fallbackvar(--md-shape-card)	Controls tooltip container shape.
--md-rich-tooltip-subhead-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls tooltip subhead color.
--md-rich-tooltip-subhead-fontTypography Fallbackvar(--md-sys-typescale-title-small-font)	Controls tooltip subhead font.
--md-rich-tooltip-subhead-line-heightTypography Fallbackvar(--md-sys-typescale-title-small-line-height)	Controls tooltip subhead line height.
--md-rich-tooltip-subhead-sizeLayout Fallbackvar(--md-sys-typescale-title-small-size)	Controls tooltip subhead size.
--md-rich-tooltip-subhead-trackingTypography Fallbackvar(--md-sys-typescale-title-small-tracking)	Controls tooltip subhead tracking.
--md-rich-tooltip-subhead-typeTypography Fallbackvar(--md-sys-typescale-title-small)	Controls tooltip subhead type.
--md-rich-tooltip-subhead-weightTypography Fallbackvar(--md-sys-typescale-title-small-weight)	Controls tooltip subhead weight.
--md-rich-tooltip-supporting-text-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls tooltip supporting text color.
--md-rich-tooltip-supporting-text-fontTypography Fallbackvar(--md-sys-typescale-body-medium-font)	Controls tooltip supporting text font.
--md-rich-tooltip-supporting-text-line-heightTypography Fallbackvar(--md-sys-typescale-body-medium-line-height)	Controls tooltip supporting text line height.
--md-rich-tooltip-supporting-text-sizeLayout Fallbackvar(--md-sys-typescale-body-medium-size)	Controls tooltip supporting text size.
--md-rich-tooltip-supporting-text-trackingTypography Fallbackvar(--md-sys-typescale-body-medium-tracking)	Controls tooltip supporting text tracking.
--md-rich-tooltip-supporting-text-typeTypography Fallbackvar(--md-sys-typescale-body-medium)	Controls tooltip supporting text type.
--md-rich-tooltip-supporting-text-weightTypography Fallbackvar(--md-sys-typescale-body-medium-weight)	Controls tooltip supporting text weight.

Default

Tooltip

Variants

Plain tooltip

Rich tooltip

Popover Types

auto

hint

manual