SuperAPI AI 工具集

tooltip-popover-patterns

设计与创作

查看项目

更新于 10-16 08:36

技能介绍

用途:整理 Tooltip(工具提示)与 Popover(弹出层)两类上下文信息展示组件的设计规则,帮助区分二者并正确使用。

主要能力与对比:Tooltip 由悬停或聚焦触发,内容为 1-2 行短文本,鼠标离开即消失,移动端因无悬停而不适用;Popover 由点击或轻触触发,可含丰富内容、链接和操作,通过点击外部或 X 按钮关闭,移动端可用轻触操作。

Tooltip 规则:显示前延迟 300-500ms,避免误悬停闪烁;鼠标离开立即消失;默认置于上方,接近视口边缘时自动翻转;带指向触发元素的箭头;最大宽度 200-280px;不得放入交互内容。

Popover 规则:点击外部或按 Escape 键关闭;含交互元素时需焦点陷阱;移动端改用底部面板(bottom sheet)而非弹出层;不要嵌套弹出层。

适用场景:为界面组件设计上下文的短提示或含操作的面板时参考。

限制:资料未提供安装命令、代码示例、实现库或框架支持信息,暂未提供。