HTML 中的 popover 属性怎么用？和 dialog 有什么区别

popover 是 HTML 的全局属性，给任何元素加上它，元素就变成一个「轻量浮层」——默认点击页面其它地方或按 Esc 自动关闭；dialog 是一个独立的元素，调用 showModal() 后变成模态对话框，自带遮罩层和焦点陷阱。结论：需要阻塞用户、必须处理完才能继续的交互选 dialog；菜单、提示、气泡卡片这类非模态浮层选 popover。

popover 属性怎么用？三步就能跑起来

结论：popover 的最小用法只需要「一个触发按钮 + 一个带 popover 属性的元素」，不用写一行 JavaScript。

<button popovertarget="menu">打开菜单</button>
<div id="menu" popover>
  <a href="/a">选项 A</a>
  <a href="/b">选项 B</a>
</div>

第一步，给浮层元素加 popover 属性（不写值等价于 popover="auto"）。第二步，在触发元素上写 popovertarget="浮层的 id"，浏览器会自动接管开关。第三步，需要时用 JS API 控制：el.showPopover()、el.hidePopover()、el.togglePopover()，状态用伪类 :popover-open 判断，事件用 toggle（e.newState 是 "open" 或 "closed"）。

popovertargetaction 可以指定按钮行为，取值 toggle（默认）、show、hide——一个按钮专门关闭浮层就写 popovertargetaction="hide"。

popover="auto"、"manual"、"hint" 有什么区别？

结论：auto 会「轻触关闭」（light dismiss，即点击浮层外部自动关闭）且互斥，manual 不会被自动关闭，hint 是给 tooltip 这类非交互提示用的。

• auto：默认值。点击外部关闭、按 Esc 关闭，并且打开新的 auto 浮层会自动关掉上一个——同一时刻只留一个。
• manual：必须显式调 hidePopover() 或点 popovertargetaction="hide" 的按钮才关闭。适合 toast、需要用户逐条处理的浮层。
• hint：不会关掉已有的 auto 浮层，但会被 auto 浮层关掉。Chrome/Edge 133 起支持，用于悬浮提示这类「不该抢戏」的内容。

浏览器支持：popover 属性在 Chrome/Edge 114（2023 年 5 月）、Safari 17（2023 年 9 月）、Firefox 125（2024 年 4 月）落地，属于 Baseline 已可用特性。

popover 和 dialog 有什么区别？

结论：核心差异在模态性、定位、焦点管理和语义定位四点。

dialog 还有个 popover 没有的能力：内部表单写 <form method="dialog">，提交后对话框自动关闭，且返回值能从 dialog.returnValue 读到，做「确认/取消」很省事。

定位和动画这两个坑要注意

结论：popover 默认没有定位，且因为从 display: none 切换显示，普通 transition 不会生效。

popover 打开时进入 top layer（浏览器最顶层渲染层，不受父元素 overflow: hidden 和 z-index 影响），但位置要靠自己定：用 CSS 锚定定位（position-anchor）或 JS 计算坐标，否则它就出现在文档流原位。

动画方面，popover 关闭时 display 变回 none，opacity 过渡会被直接掐断。正确写法是配合 @starting-style 定义入场状态：

[popover] { opacity: 0; transition: opacity .2s, display .2s allow-discrete; }
[popover]:popover-open { opacity: 1; }
@starting-style { [popover]:popover-open { opacity: 0; } }

还有一个易错点：判断打开状态用 :popover-open，不要写 [open]——popover 不会像 <details> 那样加 open 属性。

总结

选择逻辑很简单：模态对话框、必须用户回应 → dialog + showModal()；菜单、气泡、tooltip 这类轻量浮层 → popover，需要点击外部关闭就留 auto，需要常驻就用 manual。两者都能进 top layer，但只有 dialog 提供焦点陷阱和遮罩，只有 popover 提供「零 JS 开关 + 点外部关闭」的默认行为。