组件 工具提示

工具提示

工具提示是一个文本标签,会在用户鼠标悬停、聚焦或触摸一个元素时显示。

工具提示在触发时用于识别元素。它们可能包含关于其功能的简要帮助文本。例如,它们可能为可操作的图标提供文本说明。

工具提示标签不会获得输入焦点。

工具提示可通过以下操作触发:
  • 鼠标悬停在元素上
  • 用键盘将焦点移至元素(通常是 Tab 键)
  • 触摸时
Material Design 中的工具提示用于显示文本标签

用法 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

为交互式图像提供工具提示。

Material Design 工具提示正确示例

推荐做法

Material Design 工具提示错误示例

不推荐做法

工具提示不会显示如图片和格式化文本之类的富文本信息。

工具提示与 ALT 属性不同,ALT 属性主要用于静态图片。

工具提示没有方向箭头;相反,它们依靠从触发源发出的动效来传达方向。

Material Design 工具提示正确示例

推荐做法

Material Design 工具提示错误示例

不推荐做法

交互 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

触摸并按住元素可以触发工具提示。只要用户继续按住元素,就应保持工具提示继续显示。

定时

松开后,工具提示会继续显示 1.5 秒。

如果用户在该时间之前采取了另一个操作,则工具提示将消失。

动画细节

工具提示的显示过程持续 150 毫秒,使用减速曲线。其隐藏过程也持续 150 毫秒,使用加速曲线

工具提示(桌面端) Expand and collapse content An arrow that points down when collapsed and points up when expanded.

文本:Roboto Medium 10sp

颜色:Grey 700

不透明度:90%

Material Design 中的光标和键盘工具提示

光标/键盘工具提示

容器高度:22dp
文本左右内边距:8dp
顶部外边距:14dp

Material Design 中的光标和键盘工具提示示例

光标/键盘工具提示示例

工具提示(移动端) Expand and collapse content An arrow that points down when collapsed and points up when expanded.

文本:Roboto Medium 14sp

颜色:Grey 700

不透明度:90%

Material Design 中的触摸界面工具提示

触摸界面工具提示

容器高度:32dp
文本左右内边距:16dp
顶部外边距:24dp

Material Design 中的触摸界面工具提示示例

触摸界面工具提示示例

Material Design 中的触摸界面工具提示示例

触摸界面工具提示示例

Material Design 中的常规状态触摸界面工具提示

常规状态下的触摸界面工具提示示例

Material Design 中的按下并持续按住状态工具提示示例

按下并持续按住状态下的工具提示示例