跳到主要内容

Tooltip vs Popover

「旁边弹个小东西」的两种

我需要一个从某处浮出来的小浮层,用哪个?

对比表

Tooltip vs Popover
Pattern触发方式能放什么能点典型场景
Tooltip文字提示悬停 / focus只有文字不能解释图标、缩写
Popover浮出层点击菜单、表单、任意内容能操作面板、选择器

← 左右滑动查看完整表格

真实 Demo 对比

Tooltip

文字提示
悬停(或用 Tab 聚焦)任意图标,会出现 Tooltip。图标按钮必须配它,否则用户不知道是什么。

怎么判断:「这玩意是干嘛的」

Popover

浮出层
Popover 和 Tooltip 的区别:这里里面有可以点的东西(模板选择)。

怎么判断:「从这里选一个 / 填一下」

选型决策

  • 只是想告诉用户这个名字/含义Tooltip
  • 浮层里要能点、能选、能填Popover
  • 移动端为主要平台别依赖 Tooltip(触屏难触发),用可见文字

一句话结论

一句话区分:Tooltip 只能「看」,Popover 能「用」。如果你的浮层里出现任何可点的东西,那就不是 Tooltip。

相关对比