Popover 气泡卡片
/POP-oh-ver/ · noun · 浮层类模式 · #078
在你点的东西旁边打开的小面板，带个小尖角指回它，里面放的是能操作的内容——选项、简短表单、预览。跟工具提示不同，它要点了才出现、可以在里面操作；跟模态弹窗不同，它不挡住整个页面。
别名：弹出框、气泡弹窗。
你可能会这样叫它
- “点击后旁边弹出的小框”
- “带小尖角的弹出框”
- “气泡弹窗”
- “按钮旁边的浮层”
- “点一下出现的气泡”
……它的名字是 气泡卡片（Popover）。
常见问题
Popover 是弹窗吗？
算一种弹出层，但不是模态弹窗。Popover（气泡卡片）贴在触发它的按钮旁边、带个小尖角，不会挡住整个页面，点外面就关；模态弹窗会压暗整页、必须先处理。Ant Design 里叫“气泡卡片”，Element 里叫“弹出框”。
Popover 和 Tooltip 有什么区别？
Tooltip（工具提示）是悬停或聚焦时出现的一行只读说明，移开就消失；Popover 要点击才打开、会一直停留，里面可以放按钮、链接甚至表单。需要用户在里面点东西的，就只能用 Popover。
代码里叫什么
| SwiftUI | .popover(isPresented:) |
|---|---|
| UIKit | UIPopoverPresentationController .modalPresentationStyle = .popover |
| Jetpack Compose | Popup |
| Android (Views) | PopupWindow |
| Flutter | OverlayPortal 没有现成的 Popover 组件，一般基于 Overlay 自己做 |
| Web (HTML / ARIA) | popover popovertarget showPopover() |
复制给 AI 编程工具
给这个按钮加一个气泡卡片（Popover）：点击后在按钮旁边打开一个小面板，带一个指回按钮的小尖角，里面放额外的控件。用户在里面操作时它保持打开；点外面、按 Esc 或再点一次按钮会关闭，焦点回到按钮。网页上用 popover 属性配合 popovertarget，自带点外面关闭和顶层显示；手机上把同样的内容改成底部抽屉展示。