Tooltip

Tooltip 提供通用的工具提示界面，支持纯文本和丰富内容样式，并可控制底层弹出层行为。

Tooltip

默认

Tooltip

变体

Plain tooltip

Rich tooltip

弹出层类型

auto

hint

manual

操作提示

操作组件可通过 title 快速设置文本提示。该标题由库的 tooltip 行为渲染，不会传递给 DOM，因此不会显示原生 HTML 提示。

简单操作标题共用一个非交互式提示层。只有在首次悬停、键盘聚焦或长按操作时，才会延迟创建提示层及其锚点，因此未打开的操作不会分配提示 DOM 或每个触发器的事件监听器。共享提示层会跟随当前操作，并在该操作树卸载时释放。

<Button title="保存更改">保存</Button>

<IconButton icon="settings" title="设置" />

<FloatingActionButton icon="edit" title="撰写" />

以下组件支持此行为：

• Button
• IconButton
• FloatingActionButton

对于仅图标操作，如果未提供 aria-label 或 aria-labelledby，title 也会用作备用可访问名称。

<IconButton icon="settings" title="设置" />

<!-- 可访问名称相同，但提示文本不同。 -->
<IconButton icon="settings" aria-label="打开设置" title="设置" />

需要丰富或可交互内容、引用提示层、自定义位置或不同交互选项时，请使用 v-tooltip。自定义的丰富提示层会保留自身的 DOM、焦点和交互生命周期，不使用共享的简单标题运行时。

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

<Tooltip id="save-tip" variant="rich">
  保存当前草稿并继续编辑。
</Tooltip>

完整指令 API 请参阅 v-tooltip。

浮动表面

共享主题颜色、边框、阴影，以及包含嵌套菜单和对话框的交互式示例，请参阅浮动表面 token。

参考

结构

高亮显示

元素	部件	选择器
<div>	root	[data-scope="tooltip"][data-part="root"] left_click鼠标左键单击复制

属性

名称	说明	默认值	控件
variant可选	The variant of the tooltip. plainrich	"plain"	checkplainrich
popover可选	The popover behavior of the tooltip. automanualhint	"hint"	automanualcheckhint

插槽1

名称	参数	说明
default	-	The default slot for the tooltip content.

样式43

预览

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