原生 popover 仅 chromium 支持，需结构+属性+js 三者配合；manual 模式下用 showpopover()/hidepopover() 控制，须检测支持性；popovertarget 等仅适用于 auto 模式；无 beforeclose 事件；非 chromium 浏览器需降级为 dialog 或 tippy.js。
原生 popover 属性目前仅 Chromium 系浏览器（Chrome 114+、Edge 114+）支持，Safari 和 Firefox 尚未实现；它不能靠单加一个属性就工作，必须满足结构 + 属性 + JavaScript 控制三者缺一不可。
怎么用 showPopover() 和 hidePopover() 控制显隐
原生 popover 不响应 click 或 hover 自动触发，必须显式调用方法。目标元素需带 popover="manual"（推荐），否则 popover="auto" 下行为不可控（比如点击空白处自动关闭，但无法监听或拦截）。
-
showPopover()会关闭其他已打开的 manual popover，这是默认行为，无法禁用 -
hidePopover()只隐藏当前元素，不干扰其他 popover - 调用前务必检测支持性：
if ("showPopover" in HTMLElement.prototype)，否则 Safari/Firefox 会直接抛TypeError - 关闭按钮写法示例：
<button onclick="this.closest('[popover]').hidePopover()">×</button>，注意用closest()向上找最近的 popover 容器，而非硬编码 ID
popovertarget 和 popovertargetaction 属性怎么配才生效
这两个属性是纯 HTML 驱动 popover 的核心，但它们只在 popover="auto" 模式下起作用，且不兼容手动控制逻辑——一旦混用，行为混乱。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
popovertarget必须指向一个具有id的元素，且该元素必须有popover属性（值可为空或"auto"），不能是 class 或标签名 -
popovertargetaction可选"show"、"hide"、"toggle"；省略时默认为"toggle" - 触发元素和目标元素无需父子关系，可以跨 DOM，但目标元素必须已存在于文档中（不能是 JS 动态 append 后再设属性）
- 大小写敏感：
popover是属性名，不是Popover或data-popover
为什么 beforetoggle 事件监听不到“即将关闭”
beforetoggle 事件只在 toggle 开始时触发一次，且无法取消——它不是“关闭前钩子”，而是“状态切换启动信号”。你无法阻止关闭，也不能在其中修改内容或延迟。
- 事件对象只有
opened属性（布尔值），表示切换后状态，不提供“原状态”或“触发源”信息 - 没有
beforehide或beforeclose单独事件，想做关闭前动作（如保存草稿），只能靠自定义逻辑：比如在关闭按钮点击时先执行业务代码，再调hidePopover() - 嵌套 popover 时，
beforetoggle触发顺序不确定，多层同时操作容易丢失事件
移动端和 Safari 用户怎么兜底
别指望原生 popover 在非 Chromium 浏览器里能用。真实项目中必须降级：
- 首选
<dialog></dialog>元素：语义正确、支持showModal()、有 backdrop、可 focus 管理，且 Safari/Firefox 均支持多年 - 避免用 Bootstrap Popover 做兜底：它依赖 jQuery 和 Popper，体积大、移动端 hover 行为异常（iOS Safari 的 300ms 延迟）、
data-bs-*属性与 JS 初始化冲突风险高 - 如果必须用第三方库，优先选无依赖的轻量方案（如 tippy.js），它不强制要求特定 DOM 结构，可完全由 JS 控制，且对移动端 touch 事件有专门适配
- 检测到不支持时，把 popover 内容转为 inline 展开（
display: block），或用details/summary替代，保证信息可达
最易被忽略的一点：原生 popover 的定位完全由浏览器控制，不提供偏移量 API（比如“下移 8px”）、不支持自定义箭头样式、不暴露 Popper 实例——所有这些，都得自己用 CSS 覆盖或换方案实现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
