Skip to main content
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →
用户体验模式6 分钟阅读·Updated 2026 年 10 月·ExodeUI 团队

不妨碍解释的工具提示

如何设计有帮助的工具提示:简短的补充信息、悬停和键盘访问、触摸替代方案,以及为什么基本说明不属于工具提示。

直接总结和定义

核心要点

工具提示是悬停或键盘焦点上显示的简短消息,用于提供补充信息,例如指标的含义。保持简短,切勿在其中放置重要说明,使它们可以通过键盘访问,在触摸屏上提供基于点击的替代方案,并且不要在其中放置链接或按钮。

什么是工具提示

Nielsen Norman Group 将工具提示定义为一条简短的信息性消息,当用户通过鼠标悬停或键盘悬停(将键盘焦点保持在元素上)启动与元素交互时,会出现该消息。由于它们依赖于悬停,因此工具提示通常在触摸屏上不可用。

带有信息图标的仪表板指标,显示简短的工具提示定义,旁边是要做和不做的指南
简短的补充定义是工具提示的经典用法。

补充,绝不是必需的

NN/g 给出了一个明显的错误示例:某个网站将密码要求放在工具提示中。人们完成任务所需的信息应该显示在屏幕上。工具提示适合定义、为什么要求字段的解释以及仅图标按钮的标签。

无障碍

使工具提示可供所有人使用:

  • 在键盘焦点和悬停时打开。
  • 让人们通过 Escape 忽略它而不移动焦点。
  • 当指针移动到其上时,使其保持打开状态。
  • 将其连接到触发器,以便屏幕阅读器读出它。
  • 不要在里面放入互动内容;请改用弹出窗口。

触摸设备上的工具提示

触摸时不存在悬停。使用可见的信息图标,点击即可打开一个小弹出窗口,或显示内联说明。对于复杂的企业指标,标签旁边的信息图标是每个设备上熟悉的模式。

动作和时机

显示前的短暂延迟可以避免当指针经过元素时工具提示闪烁;一旦打开,相邻的工具提示就会立即出现。扳机的快速淡出或小规模有助于人们看到它的来源。将其保持在 150 毫秒左右。

要记住的关键 Principle

  • 工具提示是简短且补充性的
  • 切勿在工具提示中隐藏重要说明
  • 支持键盘焦点和Escape
  • 在触摸设备上使用可点击的信息图标
  • 工具提示内没有交互式内容

常见问题解答

来源

  1. Tooltip Guidelines — Nielsen Norman Group

相关指南和示例

小动作,大清晰度

调整浏览器中工具提示和弹出窗口的快速、平静的过渡。

打开弹簧发生器
免费试用