原生 HTML popover 必须配合 popover 元素、popovertarget 属性及 popovertargetaction 才能生效；触发元素需可聚焦（如 button 或 tabindex="0" + role="button"），目标需有匹配 id 且未被 display:none 隐藏；Chrome 114+ 稳定支持，Firefox/Safari 支持有限，建议运行时检测并降级处理。
popover 属性必须配合 popover 元素和 popovertarget 才能生效
原生 HTML popover 不是“挂载即用”的交互机制，它要求显式声明触发元素与被控 popover 元素的关联关系。单纯给一个 div 或 span 加 popovertarget="id" 是无效的——浏览器会忽略，因为该属性只对**可聚焦、可交互的元素（如 button、a、带 tabindex 的元素）** 有效，且目标必须是带有 popover 属性的元素。
常见错误现象：click 事件监听正常，但 popover 不显示；控制台无报错，DOM 中 popover 元素也存在，就是不弹出。
-
popovertarget必须搭配popovertargetaction="show"（或"hide"）才触发，缺一不可 - 目标元素必须有
id，且该id与popovertarget值完全一致（大小写敏感） - 目标
popover元素不能被display: none或visibility: hidden隐藏（初始状态应为未渲染或hidden属性）
非按钮元素要触发 popover，得让它“假装可交互”
原生 popover 触发逻辑依赖于 UA 对“激活行为（activation behavior）”的判定，比如 click、Enter 键、Space 键。普通 div 默认没有这些行为，所以必须手动赋予。
最稳妥的做法是加 tabindex="0"，再配 role="button"（语义化 + 可键盘聚焦），然后绑定 popovertarget：
立即学习“前端免费学习笔记（深入）”；
<div tabindex="0" role="button" popovertarget="my-popover" popovertargetaction="show"> 点我展开气泡 </div> <p><div id="my-popover" popover> 这是气泡内容 </div>
注意：仅加 tabindex 不够，部分浏览器（如 Safari 当前版本）仍可能拒绝触发；role="button" 是关键补充，告诉辅助技术及 UA “这个元素应该像按钮一样响应交互”。
- 不要用
tabindex="-1"—— 它无法通过键盘聚焦，也就无法响应Enter/Space - 避免同时用
onclick+popovertarget—— 可能导致重复触发或状态冲突 - 若需支持鼠标悬停（hover），必须用 JavaScript 监听
mouseenter并调用showPopover()，原生不支持 hover 触发
Firefox 和 Safari 对 popover 的支持仍不完整
Chrome 114+ 已稳定支持原生 popover，但 Firefox（截至 128）仅实验性开启（需 about:config 启用 dom.popover.enabled），Safari 17.4+ 才开始支持，且对非 button 元素的支持更保守。
这意味着：即使你写了正确的 tabindex + role + popovertarget，在 Safari 中仍可能静默失败（无报错，也不弹出）。
- 检查
document.createElement("div").popover是否为undefined，可判断当前环境是否支持 - 生产环境建议 fallback：检测不支持时，改用
showPopover()/hidePopover()手动控制，或降级为自定义浮层 -
popover元素默认定位在触发元素附近，但无法用 CSSposition: absolute精确控制偏移；如需微调，只能靠anchor+anchor-position（目前仅 Chrome 支持）
容易被忽略的 DOM 顺序和样式陷阱
原生 popover 渲染时会自动插入到 末尾（类似 portal），但它仍受 CSS 作用域影响。如果触发元素在 shadow DOM 内，或 popover 元素被包裹在 overflow: hidden 的容器中，可能被裁剪或定位异常。
-
popover元素必须是的直接子元素，或至少不在overflow: hidden的祖先内——否则会被截断 - 不要给
popover元素设z-index：它的层级由浏览器自动管理，设了反而可能被遮挡 - 初始状态推荐用
<div id="my-popover" popover hidden>，而不是 <code>style="display: none"—— 后者会导致 popover API 认为它“不可用”真正麻烦的不是怎么写，而是怎么让不同浏览器都按你预期的方式响应那个
click。尤其当触发元素嵌套在复杂布局里时，anchor 定位偏移、focus 状态丢失、popover 被父容器裁剪——这些问题往往要靠组合tabindex、role、hidden和运行时检测才能稳住。
