能实现，但必须严格配对 popover 和 popovertarget；原生 popover 是声明式联动机制，需目标容器含 id 和 popover 属性、触发元素用 popovertarget 指向该 id，且首次激活必须 JS 调用 showPopover() 或 hidePopover() 初始化。
能实现，但必须严格配对 popover 和 popovertarget，缺一不可；只写 popover 属性，浏览器完全忽略——这不是 bug，是规范强制要求。
popover 和 popovertarget 必须成对出现
原生 popover 不是“给某个元素加个属性就弹出来”，它是一组声明式联动机制：
- 目标容器（如
<div>）必须同时具备id和popover（布尔属性，无值，不能写popover="auto"或popover="true"） - 触发元素（如
<button>）必须用popovertarget指向该id，且大小写、拼写、空格都需完全一致 -
popovertargetaction可选值为show、hide、toggle；省略时默认为toggle - 两者无需父子关系，可分散在 DOM 任意位置
错误示例：<button popover>点我</button> —— 浏览器不识别；<div id="tip" popovertarget="tip"></div> —— popovertarget 写在目标上，无效。
popover 元素默认隐藏，但不能靠 display: none 控制
浏览器会给带 popover 的元素自动添加 UA 样式（含 display: none），但你不能用 display: none 或 visibility: hidden 手动干预生命周期，否则会破坏状态同步。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：用
[popover] { opacity: 0; pointer-events: none; }+[popover]:popover-open { opacity: 1; pointer-events: auto; }实现过渡动画 - 箭头必须手动实现，比如用
[popover]::before+transform: translate()模拟，原生不提供任何箭头 DOM 或 class - 务必显式设置
position: absolute（尽管 UA 会加，但 CSS 重置更稳妥） - 避免使用
@starting-style做初始动画——目前仅 Chromium 支持，且需配合transition才生效
首次激活必须 JS 初始化（纯 HTML 无法启动）
这是最容易被文档忽略的硬性限制：即使所有属性写对，纯静态 HTML 页面首次加载时，点击按钮也不会响应——因为 popover 生命周期尚未启动。
- 必须在页面加载后，对目标元素调用一次
showPopover()或hidePopover()（哪怕紧接着再 hide） - 最简方案是在
<body onload="document.getElementById('my-popover').showPopover()"里内联调用，或用<script>块执行一次 - Safari 17.4+ 要求该元素在首屏渲染时已存在于 DOM 中，不能靠
innerHTML动态插入后再加popover - Firefox 当前仍未实现该 API，Safari 是唯一非 Chromium 的支持者，但行为细节（如 Escape 键支持）仍有差异
真正“零脚本”的场景极少——至少需要一行初始化 JS；所谓“免 JS”是指后续开闭逻辑完全由属性驱动，不再需要监听 click 或管理 state。定位、样式、兼容性这三块，比写 JS 还容易翻车。
