界面组件›工具提示

工具提示Tooltip

手机没有鼠标悬停,还能知道 MOQ 是什么意思吗?

专业定义

工具提示在控件获得键盘焦点或鼠标悬停时提供简短补充说明,通常不接受焦点,也不包含按钮、链接等交互。控件的可读取名称、关键条件和手机端说明不能只依赖悬停出现的文字。

大白话

不熟悉的词旁边补一句解释。真正决定怎么填写、怎么买的条件,仍应直接放在能看到的地方。

生活类比

展品旁的小注释帮助理解名称,但不能把价格与购买限制藏在只有特定角度才看见的位置。

类比到这里为止:屏幕提示需要考虑触屏、键盘与读屏,不能把鼠标悬停当成所有用户都具备的操作。

外贸出海场景

MOQ 旁解释“最小起订量”,表单仍直接说明当前型号的实际要求。具体数量若待确认,不由缩写解释推导出承诺。

用三种方式检查

键盘
焦点到入口后说明出现;Escape 关闭,焦点不被抢走。
鼠标
从入口移到说明上仍可读,不因很短的移动就消失。
触屏
关键意思在正文可读,必要时提供明确的点按说明入口。

补充描述与控件名称不同

按钮先要有自己的名称。提示可以通过 aria-describedby 补充描述,但不能用一段隐藏长文替换用户正在看的按钮名字。

本例显示 MOQ 的短解释,并在旁边保留可见的完整意思。WAI 的 Tooltip 模式仍注明在讨论中,因此这里只依据其交互建议和悬停/聚焦内容准则核对,不宣称通过读屏认证。

动手看一遍 · 本地教学演示

手机没有鼠标悬停,还能知道 MOQ 是什么意思吗?

可以操作,也可以重试。数据为虚构示例,不连接真实业务系统。

正在准备当前演示,正文可以继续阅读。

继续看项目应用与交付检查
先建立专业坐标

工具提示 在项目中负责什么

什么时候用
陌生图标、缩写或控件需要不打断任务的简短补充时。
它解决什么
降低理解门槛,同时保留页面正常的名称与操作路径。
它不负责什么
不能用 Tooltip 替代字段标签;有链接或复杂内容时改用可操作浮层。鼠标移入提示本身应有阅读机会,Escape 可关闭。
放进真实项目
客户悬停在“MOQ”旁边时看到“最小起订量”的简短解释。
专业拆解 · 业务场景

工具提示只补充一个短解释,不能藏关键规则或主要操作

图标按钮、陌生缩写或被截断名称可以在聚焦时解释;表单必填规则应始终可见。

  1. 01

    先判断能否直接显示文字标签。

  2. 02

    提示内容保持短且无复杂交互。

  3. 03

    支持焦点触发并允许足够阅读时间。

一句话记住

解释一句,不装按钮;关键条件留在正文。

容易混淆的地方

title 属性的浏览器提示不等于完整的自定义可访问 Tooltip;提示文字不该取得焦点或成为唯一手机说明。

随堂一练 用一个判断把概念记住

MOQ 的解释只在鼠标悬停时出现,里面还塞了一个下载链接。首先该改什么?

你可以这样告诉 AI Agent

“

我在处理这件事:客户悬停在“MOQ”旁边时看到“最小起订量”的简短解释。请以“工具提示”为主线,先说明它在这里负责什么、不负责什么;再列出必要输入、建议动作和可验证结果。用外贸独立站的业务语言回答,不确定的信息标为待确认。

内容依据与延伸

本站用原创中文解释把专业概念映射到外贸独立站;定义和机制继续以官方资料为准,业务例子再回到 外贸独立站询盘优化实战 验证。

本站整理说明:原创整理:Web 开发、产品设计、AI 协作与外贸独立站实践
就地查词 · 关闭后继续阅读