用户体验模式6 分钟阅读·Updated 2026 年 10 月·ExodeUI 团队
不妨碍解释的工具提示
如何设计有帮助的工具提示:简短的补充信息、悬停和键盘访问、触摸替代方案,以及为什么基本说明不属于工具提示。
直接总结和定义
核心要点
工具提示是悬停或键盘焦点上显示的简短消息,用于提供补充信息,例如指标的含义。保持简短,切勿在其中放置重要说明,使它们可以通过键盘访问,在触摸屏上提供基于点击的替代方案,并且不要在其中放置链接或按钮。
什么是工具提示
Nielsen Norman Group 将工具提示定义为一条简短的信息性消息,当用户通过鼠标悬停或键盘悬停(将键盘焦点保持在元素上)启动与元素交互时,会出现该消息。由于它们依赖于悬停,因此工具提示通常在触摸屏上不可用。
补充,绝不是必需的
NN/g 给出了一个明显的错误示例:某个网站将密码要求放在工具提示中。人们完成任务所需的信息应该显示在屏幕上。工具提示适合定义、为什么要求字段的解释以及仅图标按钮的标签。
无障碍
使工具提示可供所有人使用:
- 在键盘焦点和悬停时打开。
- 让人们通过 Escape 忽略它而不移动焦点。
- 当指针移动到其上时,使其保持打开状态。
- 将其连接到触发器,以便屏幕阅读器读出它。
- 不要在里面放入互动内容;请改用弹出窗口。
触摸设备上的工具提示
触摸时不存在悬停。使用可见的信息图标,点击即可打开一个小弹出窗口,或显示内联说明。对于复杂的企业指标,标签旁边的信息图标是每个设备上熟悉的模式。
动作和时机
显示前的短暂延迟可以避免当指针经过元素时工具提示闪烁;一旦打开,相邻的工具提示就会立即出现。扳机的快速淡出或小规模有助于人们看到它的来源。将其保持在 150 毫秒左右。
要记住的关键 Principle
- 工具提示是简短且补充性的
- 切勿在工具提示中隐藏重要说明
- 支持键盘焦点和Escape
- 在触摸设备上使用可点击的信息图标
- 工具提示内没有交互式内容
常见问题解答
来源
- Tooltip Guidelines — Nielsen Norman Group