popover不是HTML原生属性，截至2024年仅Chrome/Edge 114+支持JavaScript Popover API，需通过pop.popover="auto"声明容器并调用showPopover()控制，Firefox/Safari不支持，生产环境建议CSS+JS模拟。
popover属性在HTML中根本不存在
目前（截至2024年），popover 不是 HTML 元素的原生布尔属性，直接写 <div popover></div> 不会生效。你看到的可能是实验性草案、框架封装（如 Bootstrap）、或混淆了 Popover API 的 JavaScript 用法。
真正可用的 Popover API 是 JavaScript 接口
Chrome 114+、Edge 114+ 支持原生 Popover API，但它依赖显式 JS 控制，不是靠 HTML 属性自动触发。核心逻辑是：标记元素为 popover 容器 + 用 JS 关联触发器 + 调用 showPopover() 或 hidePopover()。
-
popover是HTMLElement的一个枚举属性（element.popover = "auto" | "manual"），用于声明该元素可作为 popover 容器 - 必须手动绑定事件，比如
trigger.addEventListener("mouseenter", () => target.showPopover()) - 悬停显示需自行处理防抖和移出关闭，否则会闪退或卡住
- 不支持 CSS 伪类
:hover直接驱动，因为showPopover()是同步方法，且 popover 元素默认display: none直到被调用
鼠标悬停自动显示的最小可行实现
以下代码在 Chrome/Edge 中可运行，注意替换 ID 和添加防抖：
<button id="trigger">悬停我</button>
<div id="pop" popover>这是弹窗内容</div>
<script>
const trigger = document.getElementById("trigger");
const pop = document.getElementById("pop");
// 必须先设置 popover 属性，否则 showPopover() 报错
pop.popover = "auto";
trigger.addEventListener("mouseenter", () => {
pop.showPopover();
});
trigger.addEventListener("mouseleave", () => {
// 加个简单延迟，避免移出时立即关闭导致无法点击 popover 内容
setTimeout(() => pop.hidePopover(), 200);
});
</script>
- 必须给 popover 元素设
popover属性（JS 设置或 HTML 写<div popover>），否则 <code>showPopover()抛InvalidStateError -
mouseleave立即调用hidePopover()会导致鼠标滑向 popover 时关闭——所以加setTimeout或用pointerenter/pointerleave+ 区域判断 - Firefox 和 Safari 当前（2024）完全不支持该 API，需降级 fallback（如用
position: absolute+visibility切换） - 用
aria-describedby关联触发器与描述元素，配合visibility或opacity控制显隐 - 监听
mouseenter/mouseleave，但对 popover 区域也监听事件，防止“滑过去就消失” - 避免用
display: none，改用visibility: hidden+pointer-events: none，确保事件穿透可控 - 移动端无 hover，需额外支持
click或focus触发
兼容性差，生产环境建议用 CSS + JS 模拟
如果需要全浏览器支持，别依赖 Popover API。更稳妥的做法是：
立即学习“前端免费学习笔记（深入）”；
原生 Popover API 虽简洁，但目前只适合实验或 Chrome-only 内部工具。真正上线项目，hover 弹窗的边界情况（快速进出、焦点管理、屏幕阅读器支持）远比调用一个 showPopover() 复杂得多。
