组件 • 操作提示
操作提示
当用户将鼠标悬停在按钮上时出现的提示框。通常包含有关点击按钮后将执行的操作的解释或附加信息。常用于仅包含图标的按钮,让用户清楚地了解与之相关的操作。
§结构

- 标题 是提示框最重要的必填项;它描述了按钮的主要功能。我们建议标题文本的格式尽量在一行内显示。
- 描述 — 提示框的可选元素,提供关于标题的附加信息。
- 快捷键/组合键 - 提示框的可选元素,按下此组合键可在界面中触发描述的操作。用于教会用户快速操作,以加快与服务的交互速度。
§选项

- 仅标题 是最常用的选项;提示框仅简要描述操作本身。我们建议文本格式包含不超过 5 个单词。
- 标题和快捷键 - 如果操作已分配了组合键,建议显示它以指导用户。
- 标题和描述 - 如果操作比较复杂,标题无法简洁清晰地表述,建议包含描述以提供附加信息。
- 标题、描述和快捷键 - 组件的最大组合,当所有元素都对用户在界面中做出决策至关重要时使用。
§尺寸
当仅使用标题或标题+快捷键时,提示框的宽度会根据文本进行调整。对于描述,宽度设置为 300px。
所有选项的内边距:左右 12px,上下 8px。
在包含快捷键的选项中,标题和标签之间的间距为 8px。
在包含描述的选项中(无论是否有快捷键),标题和描述之间的距离为 2px。

§位置
提示框相对于按钮的主要位置是底部居中,元素之间距离为 4px。

如果按钮位于页面左侧或右侧边缘,提示框将与相应的按钮边缘对齐。

如果按钮位于屏幕底部,提示框将显示在顶部,位置与按钮位置对应:左边缘、居中或右边缘。

§时机
根据其目的,您可以调整提示框在鼠标悬停时出现和消失的延迟。在大多数情况下,提示框会立即出现或有最多 250 毫秒的最小延迟,并在用户将光标移开按钮时消失。
如果您认为大多数用户无需提示即可理解按钮的功能,则可以仅向遇到困难的用户显示提示框,并增加出现延迟以避免因不必要的元素而打扰用户。
§用例

