原生 popover 属性需 javascript 调用 showpopover() 才能生效，chrome 114+ 等 chromium 浏览器支持，firefox 和 safari 尚未实现；纯 html 的 popover="auto" 加 hover 不会自动触发显示，因其仅为状态控制属性，非触发器。
popover属性在Chrome 114+才真正可用
原生 popover 属性目前（截至2024年中）仅在 Chromium 114+（含 Chrome、Edge、Opera）中稳定支持，Firefox 和 Safari 完全未实现。它不是“CSS hover + visibility”那种伪悬浮窗，而是浏览器原生的焦点感知、模态栈管理、自动隐藏逻辑的 popover API —— 但前提是必须用 JS 调用 showPopover() 或 hidePopover()，纯 HTML 声明 popover 属性本身不会触发显示。
为什么popover="auto"加hover不生效
常见误解是给按钮加 popover="auto"、再给弹出内容加 id 和 popover，以为悬停就能弹出。实际上：
• popover 是一个**状态控制属性**，不是触发器
• 浏览器不会监听 :hover 并自动调用 showPopover()
• 没有 JS，popover 元素默认是隐藏且不可聚焦的
如果你看到“无需 JS”的演示，大概率是用了 polyfill（如 @oddbird/popover-polyfill），或混淆了 title 属性（原生 tooltip，但样式/行为不可控）。
纯 HTML 实现类 popover 的实际替代方案
如果目标是“不用 JS 就能悬停显示内容”，只能退回到 CSS 方案，但需接受限制：
-
title属性：最轻量，但样式无法定制、无动画、移动端不触发、内容被截断无换行 - CSS
:hover+visibility/opacity：需父子嵌套（如<div class="trigger"> <span>Hover</span><div class="tooltip">Content</div> </div>），且无法脱离父容器流、不支持焦点管理、键盘用户不可访问 -
details/summary：语义正确、原生可折叠、支持键盘，但交互是点击而非悬停，且样式重置成本高
示例（CSS hover 悬浮）：
<style>
.trigger { position: relative; }
.tooltip {
position: absolute;
top: 100%; left: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s;
}
.trigger:hover .tooltip {
opacity: 1;
visibility: visible;
}
</style><div class="trigger">
Hover me
<div class="tooltip">Pure CSS popover</div>
</div>
想用原生 popover 又不想写太多 JS？最小必要代码
真正用上 popover 的最小 JS 量是两行事件绑定，不是“完全不用 JS”：
<button id="trigger">Open</button>
<div id="panel" popover>Hello, popover!</div>
<script>
document.getElementById('trigger').addEventListener('click', () => {
document.getElementById('panel').showPopover();
});
</script>
注意：
• 必须显式调用 showPopover()，不能靠属性自动触发
• popover 元素需在 DOM 中已存在，且不能是 display: none
• 若需悬停触发，把 click 换成 mouseenter，但要加防抖和 mouseleave 隐藏逻辑，否则体验差
• 移动端无 hover，所以 click 更通用
原生 popover 的复杂点不在调用本身，而在处理焦点环、Esc 关闭、滚动锚定、z-index 栈顺序——这些都由浏览器接管，但前提是 JS 已介入启动它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
