Tooltip

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

Tooltip

Default

Tooltip

Variants

Plain tooltip

Rich tooltip

Popover Types

auto

hint

manual

Action Tooltips

Action components use title as the simple text tooltip entry point. The title is rendered with the library tooltip behavior and is not forwarded to the DOM, so native HTML tooltips do not appear.

Simple action titles use one shared, non-interactive tooltip surface. The surface and its anchor are created lazily when an action is first hovered, keyboard-focused, or long-pressed, so unopened actions do not allocate tooltip DOM or per-trigger event listeners. The shared surface follows the active action and is released when its action tree is unmounted.

<Button title="Save changes">Save</Button>

<IconButton icon="settings" title="Settings" />

<FloatingActionButton icon="edit" title="Compose" />

This behavior is available on:

• Button
• IconButton
• FloatingActionButton

For icon-only actions, title is also used as the fallback accessible name when neither aria-label nor aria-labelledby is provided.

<IconButton icon="settings" title="Settings" />

<!-- Equivalent accessible name, but keeps a different tooltip string. -->
<IconButton icon="settings" aria-label="Open settings" title="Settings" />

Use v-tooltip when you need rich or interactive content, a referenced tooltip surface, custom placement, or different interaction options. Authored rich surfaces keep their own DOM, focus, and interaction lifecycle rather than using the shared simple-title runtime.

<Button v-tooltip="'#save-tip'">Save</Button>

<Tooltip id="save-tip" variant="rich">
  Save the current draft and keep editing.
</Tooltip>

See v-tooltip for the full directive API.

Floating surface

See floating surface tokens for shared theme colors, borders, shadows, and an interactive example with nested menus and dialogs.

Reference

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

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.