Material design - Components – Tooltips

Tooltips - 工具提示

Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element.

Tooltips identify an element when they are activated. They may contain brief helper text about its function. For example, they may contain text information about actionable icons.

Tooltip labels do not receive input focus.

【翻译】
工具提示是当用户悬停在，聚焦或触摸元素时显示的文本标签。
工具提示在元素被激活时识别元素。 它们可能包含关于其功能的简要帮助文本。 例如，它们可以包含关于可操作图标的文本信息。
工具提示标签不接收输入焦点。

Summoned by:

Hovering over an element with a cursor
Focusing on an element with a keyboard (usually the tab key)
Upon touch

【翻译】
召唤者：
将鼠标悬停在带有光标的元素上
用键盘集中一个元素（通常是tab键）
触摸

Usage - 用法

Use tooltips for interactive imagery.

【翻译】
为交互式图像使用工具提示。

[图片上传失败...(image-12a12a-1552292999793)]
Do.

错误的示范

Don't.

Tooltips don’t display rich information including images and formatted text.

Tooltips are different than ALT-attributes, which are intended primarily for static images.

Tooltips don’t have directional arrows; instead, they rely on motion emanating from the source to convey direction.

【翻译】
工具提示不显示丰富的信息，包括图像和格式化的文本。
工具提示与ALT属性不同，ALT属性主要用于静态图像。
工具提示没有方向箭头; 相反，它们依靠从源发出的运动来传递方向。

[图片上传失败...(image-b80dca-1552292999793)]
Do.

错误的示范

Don't.

Interaction - 相互作用

A tooltip is triggered by tapping and holding an item. Keep the tooltip displayed as long as the user continues to hold the element.

【翻译】
通过点击并按住项目触发工具提示。只要用户继续保持元素，就保持工具提示显示。

Timing - 时间
On lift, display the tooltip for 1.5 seconds.
If the user takes another action before that time ends, the tooltip will disappear.

【翻译】
在提升时，显示工具提示1.5秒。
如果用户在该时间之前采取另一个操作，则工具提示将消失。

Motion details - 运动细节
The tooltip **entrance **occurs over 150ms, using the Deceleration Curve. It also **exits **over 150ms, using the Acceleration Curve.

【翻译】
工具提示进入超过150ms，使用减速曲线。它也退出超过150ms，使用加速曲线。

Tooltips (desktop) - 工具提示（桌面）

Text: Roboto Medium 10sp

Color: Grey 700

Opacity: 90%

【翻译】
文字：Roboto Medium 10sp
颜色：灰色700
不透明度：90％

[图片上传失败...(image-b49627-1552292999793)]
Cursor/keyboard tooltips
Tile height: 22dp
Left and right text padding: 8dp
Top margin: 14dp

【翻译】
光标/键盘工具提示
瓷砖高度：22dp
左右文字填充：8dp
顶边距：14dp

image

Example of cursor/keyboard tooltip

【翻译】
光标/键盘工具提示示例

Tooltips (mobile) - 工具提示（移动）

Text: Roboto Medium 14sp

Color: Grey 700

Opacity: 90%

【翻译】
文字：Roboto Medium 14sp
颜色：灰色700
不透明度：90％

[图片上传失败...(image-5f0414-1552292999793)]
Touch UI tooltips
Tile height: 32dp
Left and right text padding: 16dp
Top margin: 24dp

【翻译】
触摸UI工具提示
平铺高度：32dp
左右文本填充：16dp
顶部边距：24dp

image

Example of Touch UI tooltips

【翻译】
触摸UI工具提示示例

image

Example of Touch UI tooltips in a normal state

【翻译】
触摸UI工具提示处于正常状态的示例

image

Example of Touch UI tooltips in a press and hold state

【翻译】
触摸UI工具提示在按住状态的示例