组件 工具提示

工具提示

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

工具提示在元素被激活时对元素进行说明,可能包含有关其功能的简要帮助文本。例如,它们可能包含一段文本来说明某个操作图标。

工具提示标签无法获得焦点。

唤起工具提示:

  • 鼠标悬停在元素上
  • 用键盘把焦点移动到一个元素上(通常是 tab 键)
  • 轻触

用法 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

为可交互的图像提供工具提示。

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

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

工具提示没有方向箭头,它们依靠移动的起始位置来指示方向。

交互 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

轻触并按住元素可以触发工具提示。如果用户持续按住元素,工具提示就持续显示。

定时

工具提示出现后,持续显示 1.5 秒。

如果用户在持续时间之前执行了其他操作,工具提示会消失。

动画细节

工具提示的入场使用减速曲线,并持续 150ms。退场使用加速曲线,并持续 150ms。

工具提示(桌面) 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

文本:10sp Roboto Medium

颜色:Grey 700

不透明度:90%

光标/键盘工具提示

磁帖高度:22dp
文本左右边距:8dp
上边距:14dp

光标/键盘工具提示示例

工具提示(手机) 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

文本:14sp Roboto Medium

颜色:Grey 700

不透明度:90%

触控界面工具提示

磁帖高度:32dp
文本左右边距:16dp
上边距:24dp

触控界面工具提示示例

触控界面工具提示示例

普通状态的触控界面工具提示

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