返回辨真假
辨真假

文字提示 vs 气泡卡片 vs 悬停卡片

Tooltip · Popover · Hover Card

一句话区分

一句解释、一个小面板、一张悬停信息卡

LIVE DEMO全量并排,直接切身感受差异

文字提示

Tooltip

查看词条

气泡卡片

Popover

查看词条

悬停卡片

Hover Card

查看词条

设计者 @jane

什么时候用哪个按成员拆开看场景,不再靠猜

文字提示

Tooltip

  • 只补一句说明,不承载操作
  • 目标是解释图标、缩写或按钮含义
  • 用户移开指针后内容就可以消失

气泡卡片

Popover

  • 除了说明,还要放按钮、表单或更多内容
  • 内容需要点击触发并保持打开一会儿
  • 适合快捷操作、筛选器、小设置面板

悬停卡片

Hover Card

  • 主要是补充预览信息,而不是执行操作
  • 用户悬停时想先看摘要、作者卡、简介卡
  • 内容比 tooltip 丰富,但仍偏浏览而非编辑
各自的提示词当前按 Web 组织,复制即可继续指挥 AI

文字提示

Tooltip

Web

给工具栏图标加文字提示(Tooltip):悬停「保存」图标显示「保存 (Cmd+S)」,延迟 300ms 出现

气泡卡片

Popover

Web

点「筛选」按钮弹出气泡卡片(Popover):内含日期选择和状态复选框,点卡片外自动关闭

悬停卡片

Hover Card

Web

在用户头像上加悬停卡片(HoverCard):悬停 300ms 浮出名片卡,显示头像、昵称和「关注」按钮,移开后收起

文字提示 vs 气泡卡片 vs 悬停卡片 对比 · ViboDesign