工具提示用于展示简短的标签文字或提示信息。

一、概览（Overview）

1.  使用要求

• 使用工具提示为按钮或其他界面元素补充额外的上下文说明。
• 工具提示分为两种类型：普通工具提示（plain）和富工具提示（rich）。
• 使用普通工具提示来说明图标按钮本身，或它所代表的操作含义。
• 使用富工具提示来提供更详细的说明，比如解释某个功能能带来的具体价值。
• 富工具提示中可以包含可选的标题、链接以及按钮等交互元素。

①普通工具提示（plain） ② 富工具提示（rich）

2. 与 M2 的差异

颜色：采用了全新的颜色映射方案，并且兼容动态配色（dynamic color）。

形状：富工具提示的圆角更大，整体造型更加圆润。

二、规格说明（Specs）

1. 普通工具提示

① 辅助文本 、 ② 容器

普通工具提示的颜色

颜色数值是通过**设计令牌（design tokens）**来实现的。对设计来说，这意味着你日常使用和标注的，是一组与令牌一一对应的颜色值。对开发实现来说，颜色最终是以“令牌”的形式存在，由令牌去引用具体的颜色数值。

浅色与深色主题下，普通工具提示使用的颜色角色：①反相前景色（Inverse on surface）、  ②反相表面色（Inverse surface）

普通工具提示的尺寸规范

普通工具提示的内边距与尺寸规范

2. 富工具提示

①副标题、 ②容器、 ③辅助文本

2.1 富工具提示的颜色

颜色数值是通过**设计令牌（design tokens）**来实现的。对设计来说，这意味着你在日常设计和标注中使用的，是一组与令牌一一对应的颜色值。对开发实现来说，每一个颜色在代码中都会以“令牌”的形式出现，由这个令牌去引用具体的颜色数值。

浅色与深色主题下，富工具提示使用的颜色角色：①表面前景变体色（On surface variant）、 ② 表面容器色（Surface container）、③表面前景变体色（On surface variant）、④主色（Primary）

2.2 富工具提示的尺寸规范

富工具提示的内边距与尺寸规范

2.3 富工具提示配置

富工具提示可以包含一个标题、一段正文，以及最多两个按钮。标题是否显示、以及按钮的数量，都可以根据需求进行配置。

①副标题、辅助文本，加上两个按钮、 ②副标题、辅助文本，加上一个按钮、 ③ 副标题和辅助文本、④ 辅助文本加一个按钮、⑤ 辅助文本加两个按钮

三、使用指南（Guidelines）

普通工具提示和富工具提示在界面中承担的作用是不同的。

1. 用法

工具提示用于为某个界面元素补充额外的说明和上下文信息。

普通工具提示（Plain tooltips）

普通工具提示用一两句话简要说明某个界面元素的含义或用途。它们最适合用来标注没有文字说明的界面元素，比如只有图标的按钮、仅有图标的输入字段等。

富工具提示（Rich tooltips）

富工具提示会为某个界面元素提供更详细的背景信息或使用说明。它们可以按需包含副标题、按钮以及超链接等交互元素。富工具提示更适合承载篇幅稍长的文字内容，例如概念定义、功能解释或使用说明等。

① 普通工具提示、 ② 富工具提示

2. 结构

2.1 普通工具提示

①容器、 ② 辅助文本

2.2 辅助文本

2.3 富工具提示

①副标题（可选）、②辅助文本、③文本按钮（可选）、④容器

副标题（可选）

副标题应尽量保持简洁，最好控制在一行以内。它需要对富工具提示中的关键信息做一个概括或简要说明。当富工具提示是自动出现的（例如在页面加载时就弹出），副标题就尤为重要，有助于用户快速理解这条提示的大意。

文本按钮（可选）

富工具提示最多可以包含两个文本按钮。按钮文案应简短、有针对性，并且与辅助文本里的信息直接相关。尽量让按钮文字足够精简，以便两个按钮可以并排展示。如非必要，应尽量避免将按钮纵向堆叠排列。

3. 位置

3.1 普通工具提示

默认情况下，普通工具提示会出现在其父元素的正上方。

如果父元素本身有清晰的视觉边界（例如按钮），工具提示与父元素之间的间距为 4dp。如果父元素没有明显的视觉边界（例如仅有文字的基线），间距则为 8dp。如果该元素位于应用栏（App Bar）中，普通工具提示会出现在元素的下方，但仍然保持相同的间距规则。

目标元素与普通工具提示之间保持 4dp 的间距。

3.2 富工具提示

默认情况下，富工具提示会出现在父元素的右下方。为了避免 tooltip 超出屏幕边界，它的位置会根据可用空间自动调整。工具提示不应遮挡父元素本身。

动态定位

为了避免超出屏幕边缘，工具提示的位置会以 8dp 为步进进行微调。

桌面端位置规则

在桌面端，工具提示可以居中显示在父元素的下方，并在光标在目标区域内移动时保持可见。

基于动态定位规则，富工具提示会出现在四个不同的相对位置示例中。

4. 行为表现

在桌面端，用户将光标悬停在父元素上时会显示工具提示；在移动端，则通过长按该元素来唤出工具提示。持久型富工具提示仅在用户点击或轻触元素时才会出现。

4.1 默认情况下为“临时型”提示

普通工具提示和富工具提示，在光标或焦点离开目标区域 1.5 秒后 会自动消失。当新的工具提示被触发时，界面上其他已打开的工具提示会立即被关闭

当没有其他元素被悬停时，工具提示会在 1.5 秒后自动消失。

同一时间只显示一个工具提示。

4.2 持久型富工具提示

持久型富工具提示会在以下任一情况出现：

• 当父级元素被点击时
• 当页面加载时，用来向用户说明一个新功能

持久型富工具提示即使在光标或焦点离开目标区域后，仍会保持显示。只有当用户与页面上的其他界面元素发生交互时，这类工具提示才会被关闭。

简单的悬停并不会触发这类工具提示。当它在页面加载时出现时，可以用于在不同的父级元素上，对新功能做引导和说明。

避免在仅有图标的按钮上使用持久型富工具提示。

不要在仅有图标的按钮上使用持久型富工具提示。

四、无障碍（Accessibility）

1. 使用场景

用户应该能够借助辅助技术完成以下操作：

• 接收到工具提示中的信息
• 通过键盘或开关输入方式触发工具提示

2. 交互与样式

对于不需要用户立即操作的普通工具提示和富工具提示，应在屏幕上停留足够长的时间，让用户有充分时间阅读信息，同时又不会打断他们当前的操作节奏或任务流程。

当光标移开后，普通工具提示应在屏幕上短暂保留一小段时间，而不是立刻消失

当用户将光标悬停在可操作元素（例如按钮或侧边导航栏）上，或者该元素获得焦点时，可以显示工具提示。不过，工具提示本身不应遮挡界面中关键信息。富工具提示还可以通过选中某个元素来触发，而不一定非要依赖悬停或焦点状态。

3. 焦点顺序

工具提示的容器不应遮挡关键信息，也不能妨碍用户完成当前操作。

在富工具提示内部，焦点顺序应在可交互元素之间自上而下依次移动。

应避免将屏幕阅读器和键盘焦点“困在”富工具提示里，无法离开。用户应该能够继续线性地在页面其他内容之间移动焦点，正常浏览和操作整页内容。

① 父级元素、② 行内链接、③ 文本按钮

4. 键盘导航

5. 元素标注

工具提示应使用 Tooltip 角色（或与之等效的角色）。

工具提示内部的所有元素都应该按照各自对应的无障碍规范进行标注与命名。

工具提示的容器应被赋予 Tooltip 角色。