SuperAPI AI 工具集

tooltip-popover

设计与创作

查看项目

更新于 10-15 21:12

技能介绍

用途:为界面元素提供简短说明或丰富上下文内容的设计模式参考,覆盖 Tooltip、Popover 与 Hover Card 三类组件。

主要能力与规则: Tooltip 用于元素的简短标签或描述,桌面端悬停触发、移动端长按触发,内容限 1-2 行纯文本,悬停 300-500ms 后显示、鼠标离开立即隐藏,默认位于元素上方,靠近视口边缘时翻转。适用于解释纯图标按钮、显示被截断内容的完整文本、为表单字段提供简短指引;不适用于关键信息、富内容(链接、图片、表单)以及以移动端为主的界面。 Popover 用于富上下文内容,点击触发而非悬停,可包含文本、链接、按钮和小型表单,通过点击外部、Escape 键或显式关闭按钮关闭,定位在触发元素附近且保持在视口内。 Hover Card 用于不跳转即可预览内容(用户资料、链接预览),悬停 500ms 后显示,悬停在卡片本身时保持可见,并提供进入完整内容的途径。

无障碍:Tooltip 使用 role="tooltip",触发元素加 aria-describedby;Popover 使用 role="dialog",需焦点陷阱并支持 Escape 关闭;两者都应可被屏幕阅读器读取并支持键盘操作。

限制:资料未提供具体实现代码、框架或安装方式。