返回知识库

界面与交互 · 反馈与临时层

气泡卡片Popover

由触发器打开、贴近锚点、无遮罩的浮层;里面能放资料和主操作,Esc 或点外部关闭,结果落回触发物件。

打开资料气泡:点触发器 → 操作 → 结果落回工单

popover 由触发器打开、贴近锚点出现、没有遮罩。亲手开一次气泡、指派负责人,看工单卡怎样即时变;再用 Esc 或点外部关闭,确认焦点回到触发器。

第 0 步:点工单行的「负责人」(或 Tab 聚焦后按 Enter)打开气泡——注意没有遮罩、背景工单仍可见。 气泡里有林晓的资料和「指派给林晓」主操作;试 Esc 或点空白处关闭,看焦点回到触发器。

工单 · 待处理#A-204 · 王女士 · 配送地址错了
负责人
未分配
最近动作

气泡里的主操作会把结果落到这张工单卡的「负责人」上——不需要再打开别的页面。

气泡位置

对照:工单负责人未分配,气泡关闭。原因:popover 把资料和主操作收进触发器,平时只看到工单行。下一步:点「负责人」打开气泡(无遮罩),试 Esc 或点外部关闭。

无遮罩、贴触发器、内有主操作——区别于 tooltip(纯文字)、modal(强制遮罩)、popconfirm(危险确认)。

面板教会的知识点

把刚才操作里看到的现象命名为七条规则。

  • 触发器 + 浮层:平时只看到「负责人」按钮,打开后才显示资料和操作,节省工单行空间。
  • 无遮罩、不阻断:背景工单仍可见可点——这是 popover 与 modal 的核心分界。
  • 浮层内有可操作内容:资料 + 「指派给林晓」主操作,不只是文字(区别于 tooltip)。
  • 结果长在触发物件上:指派后工单的「负责人」字段立即变更,浮层自动关闭。
  • 三条关闭路径一致:Esc、点外部、点「关闭气泡」都关闭,焦点回到触发器。
  • 焦点进出可预测:打开进浮层,关闭回锚点,键盘用户不迷路(不锁焦点,区别于 modal)。
  • 通用浮层 ≠ 选择菜单:放资料卡、表单、过滤器都行,不像 dropdown 只选一个值。

什么时候用 popover

从内容形态和阻断程度判断,而不是看控件长什么样。

适合

想在触发器旁给一小块可操作内容——头像资料卡、行内筛选、快速编辑、字段补充——又不打断主任务流。

先别用

纯文字说明用 tooltip;危险确认用 popconfirm;必须遮罩、锁焦点、阻断背景用 modal;只选一个值用 dropdown 或 select。

怎么用:从触发器到焦点恢复

最短路径——触发器、浮层、键盘、关闭和焦点一次到位。

  1. 触发器写清打开什么(「负责人」「筛选」),用 aria-haspopup / aria-expanded / aria-controls 关联浮层。
  2. 浮层用 role="dialog" aria-modal="false" 并给可访问名称;打开时焦点进入,关闭时回到触发器。
  3. 浮层内容保持短小、与触发器相关;放一个主操作,结果直接落到触发物件上。
  4. 关闭策略统一:Esc、点外部、显式关闭按钮至少备两条;窄屏检查浮层不溢出视口。

正反例:同一个「给负责人一个资料 + 指派入口」需求

只改一个关键判断——用 popover 还是 modal。

正例

负责人名字做触发器,点开 popover 看资料 +「指派给林晓」;无遮罩、列表仍可见,指派后工单行立即更新。

反例

把同样内容铺成全屏 modal——只是看一眼资料却强制遮罩、锁住焦点、打断列表浏览;应降级为 popover。

快速自测

列表里每行只想显示「负责人」名字,点开看一眼资料并指派,不想挡住其它工单。最合适的浮层是?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。