工具提示的作用
没有惯例的图标难以传达含义(Norman, 1999),工具提示为其补上名称。只用于非必要的简短补充(Kendrick, 2019)。扩展提示能提升理解(Grossman & Fitzmaurice, 2010),与渐进式披露思路相同。
移动端没有悬停
长按不易被发现(Google, n.d.),应常显标签或用ⓘ按钮,并保证触控尺寸(Parhi et al., 2006)。可供性弱的图标更需要标签。
避免的内容与无障碍
不要放必要信息或错误,也避免链接。用role=tooltip、aria-describedby与Esc关闭(W3C, n.d.)。WCAG 2.2的1.4.13要求可关闭、可悬停、持久,对放大使用的低视力用户很重要。
常见问题
- 移动端能用吗?
- 长按难发现,重要图标应常显标签或用ⓘ。
- 能放链接吗?
- 避免,需要交互时用弹出层。
来源核查日期:2026-10-27
参考文献
- Kendrick, A. (2019, January 27). Tooltip guidelines. Nielsen Norman Group. 工具提示应放什么内容。
- Google. (n.d.). Tooltips. Material Design 3. 普通与富文本提示及长按。
- World Wide Web Consortium. (n.d.). Tooltip pattern. ARIA Authoring Practices Guide. role=tooltip与Esc关闭。
- Grossman, T., & Fitzmaurice, G. (2010). ToolClips: An investigation of contextual video assistance for functionality understanding. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1515–1524). ACM. 扩展提示提升理解。
- Norman, D. A. (1999). Affordance, conventions, and design. Interactions, 6(3), 38–43. 图标为何需要补充说明。
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 小信息图标的点击区域。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 1.4.13悬停或聚焦内容。
