popover属性必须与popovertarget配对使用，单写popover不生效；气泡元素需设popover="auto"或"manual"并配合按钮的popovertarget指向其id，且需CSS重置样式，目前仅Chromium系浏览器支持。
popover 属性必须配对使用，单写 popover 不生效
HTML 原生 popover 的核心是两个属性：popover 和 popovertarget，缺一不可。元素本身要带 popover="auto"（或 "manual"）才能被识别为可触发的弹出容器；而触发按钮必须用 popovertarget 指向它的 id。只加 popover 属性，浏览器完全忽略——这不是 bug，是规范要求。
常见错误：给按钮加 popover，或者只给气泡加 popovertarget。正确做法是：
- 气泡元素（如
<div>）设置id="my-popover"和popover="auto" - 按钮设置
popovertarget="my-popover" - 气泡默认隐藏，无需
hidden或 CSS 控制显示状态
popover="auto" 和 popover="manual" 行为差异极大
popover="auto" 是最简路径：点击目标按钮后自动显示，再次点击（或点击外部）自动关闭。适合提示类、操作确认类场景。但注意：它不支持键盘 Escape 关闭（截至 Chrome 125），且无法用 JS 主动控制显隐。
popover="manual" 则完全交由 JS 控制，必须调用 showPopover() / hidePopover()。好处是能响应 Escape、支持过渡动画、可绑定复杂逻辑；坏处是“无需脚本”的前提就破了——一旦用了 manual，就得写 JS。
立即学习“前端免费学习笔记（深入）”；
所以，真想零脚本，只选 auto；若需精细控制，不如直接用 manual + 三行 JS，别硬扛。
样式必须重置，原生 popover 无默认外观
浏览器对 popover 元素不提供任何默认样式：没有圆角、阴影、背景色、内边距，甚至可能文字重叠或溢出。它只是个带定位语义的 <div>，渲染表现完全取决于你的 CSS。
关键样式要点：
- 必须设
position: absolute（浏览器会自动加，但建议显式声明以防覆盖） - 推荐加
background: white、border-radius: 6px、box-shadow: 0 2px 8px rgba(0,0,0,0.1) - 气泡箭头需手动实现（原生不提供），可用
::before伪元素 + transform 模拟 - 避免用
display: none控制显隐——这会破坏 popover 生命周期，改用opacity+pointer-events配合 transition 更安全
兼容性仍是硬门槛，Safari 目前不支持
目前仅 Chromium 内核浏览器（Chrome ≥114、Edge ≥114、Opera ≥100）支持 popover API。Firefox 已进入实现阶段但未默认启用；Safari 官方明确表示“暂无计划支持”，且无 polyfill 可靠模拟其行为（因为涉及底层定位与焦点管理）。
这意味着：如果你的用户有显著比例使用 Safari（尤其 iOS/iPadOS），当前阶段不能把 popover 当作唯一方案。稳妥做法是：
- 用
@supports (popover: auto)做特性检测 - 降级为传统
details/summary或 CSS-only tooltip（如 hover +position: absolute） - 避免在关键操作流中强依赖 popover，比如表单提交确认
真正落地时，“无需脚本”只在特定环境成立；跨浏览器稳定性和交互细节，往往比语法简洁更重要。
