原生 popover 仅 Chromium 系统稳定支持，需严格配对 popover 和 popovertarget 属性，气泡元素设 id+popover="auto"，按钮用 popovertarget 指向该 id；auto 模式零 JS 但功能受限，manual 模式需 JS 控制，不支持 Markdown 与自定义定位。
原生 popover 能做，但只适合极简场景——必须配对使用 popover 和 popovertarget，且目前仅 Chromium 系列（Chrome、Edge、新版 Opera）稳定支持；Safari 仍不可靠，别指望它替代 tippy.js 或 floating-ui。
popover 属性必须和 popovertarget 配对才生效
单写 popover="auto" 或只给按钮加 popovertarget，浏览器完全忽略。这不是 bug，是规范强制要求。
- 气泡容器（如
<div>）必须设id+popover="auto"（或"manual"） - 触发按钮必须用
popovertarget="对应id"，大小写、空格、引号都要严格匹配 - 气泡元素不能带
hidden或display: none，否则showPopover()会抛DOMException: Cannot show a hidden popover
auto 和 manual 模式行为完全不同
popover="auto" 是唯一“零 JS”路径，但功能受限；popover="manual" 必须写 JS 控制，等于放弃原生轻量优势。
-
auto：点击按钮自动显示/隐藏，支持点击外部关闭，但不响应Escape键（Chrome 125 仍如此） -
manual：必须调用element.showPopover()/element.hidePopover()，才能绑定键盘、动画或复杂逻辑 - 想用
togglePopover()？得先确保元素已连接 DOM 且未被display: none隐藏，否则报错
样式能改的非常有限
原生 popover 的定位、箭头、z-index 全由浏览器接管，CSS 能干预的只有基础外观。
立即学习“前端免费学习笔记（深入）”；
- 可安全修改：
font、color、padding、background、border-radius（部分浏览器支持） - 无效操作：
::before/::after画箭头、position: absolute重定位、z-index调层叠顺序（popover 总是顶层，但可能被iframe或transform容器裁剪） - 移动端 Safari 偶发不显示或点击穿透，建议 fallback 到
title属性或 10 行内 JS 方案
真正容易被忽略的是：气泡内容不支持 Markdown，只渲染纯文本；所有定位计算黑盒化，无法用 getBoundingClientRect() 获取位置——这意味着滚动、缩放、弹窗叠加时偏移无法手动修正，一旦有边界适配需求，就得切到 floating-ui 或 Popper.js。
