tooltip · 文字提示
⛔ tooltip 不承载必要信息 —— 触屏没有 hover,
只放在 tooltip 里的内容等于不存在。
✅ 键盘 focus 也会出 · Esc 能关 · 用
aria-describedby 关联(不是 aria-label:那个是「名字」)。
1 · 键盘可达(Tab 聚焦即出)
可聚焦的说明文字
2 · 四个方位
3 · 🔴 错误示范:把必要信息只放在 tooltip 里
下面这个按钮的 tooltip 文字是「删除」,与按钮可见文字完全相同
⇒ 说明它没有提供额外信息,只是重复 ⇒ 应该删掉 tooltip,
或改成真正的补充说明。
契约里有一条判据专门抓这个(tooltip 不承载必要信息)。
4 · 正确示范:补充说明
对比:错写法 vs 本库写法
❌ 常见写法:关键信息只放在气泡里
(把鼠标停在那颗 ⓘ 上才看得到说明)
触屏没有 hover,键盘用户也未必会停留 —— 这条说明对一半以上的读者等于不存在。判断标准很硬:气泡里的字不能是"必须知道才能填对"的信息。
✅ 本库:该看见的写在页面上
tooltip 只用来补一句(快捷键、单位、来源),不用来补一个字段能不能填对。真的需要解释,就写在它旁边。