popover属性和popovertargetaction不是标准html属性，其中popovertargetaction为无效属性，浏览器会忽略；正确用法是成对使用标准化的popovertarget与popover属性，且目标元素需有id，popover="auto"时点击自动显隐，"manual"时须用javascript调用showpopover()/hidepopover()方法。
popover属性和popovertargetaction不是标准HTML属性
目前（2024年中）popovertargetaction 并不是合法的 HTML 全局属性或 <button></button>/<input> 等元素的标准属性，浏览器会直接忽略它。你看到的可能是拼写错误、实验性草案残留，或混淆了 popovertarget 和 popover 这两个**已标准化**的属性。
正确用法：popovertarget + popover 属性配合
要控制 popover 的显示/隐藏，必须成对使用：popovertarget 指向一个具有 popover 属性的元素，且目标元素需有 id。浏览器原生 popover 机制只识别这两个属性，不接受额外动作参数。
常见错误现象：
- 写了
popovertargetaction="show"但无反应 → 因为该属性不存在，被忽略 - 只设
popovertarget="my-pop"，但目标元素没加popover→ 触发失败，控制台无报错但无效果 - 目标元素用了
popover="manual"却期望点击自动显示 → 必须手动调用showPopover()或hidePopover()
基础示例：
<button popovertarget="my-tooltip">Hover me</button> <div id="my-tooltip" popover>I'm a popover!</div>
这个例子中，点击按钮会自动显示 popover；再次点击会隐藏（默认是 auto 模式）。
popover="manual" 时必须用 JavaScript 控制
如果目标元素设为 popover="manual"，则 popovertarget 不再自动触发显隐，只能靠 JS 调用方法。这是最容易被忽略的兼容性断点 —— 很多人以为加了 popovertarget 就万事大吉，结果手动模式下完全没反应。
正确做法：
- 目标元素必须有
id，且设置popover="manual" - 触发元素（如按钮）不能只靠
popovertarget，要绑定click事件 - 调用
.showPopover()或.hidePopover()，注意检查元素是否存在且已连接 DOM
示例：
<button id="trigger">Toggle</button>
<div id="my-manual" popover="manual">Manual mode</div>
<script>
document.getElementById('trigger').addEventListener('click', () => {
const p = document.getElementById('my-manual');
if (p.matches(':popover-open')) p.hidePopover();
else p.showPopover();
});
</script>
浏览器支持与降级要点
原生 popover 目前仅 Chromium 114+（Chrome/Edge）、Firefox 121+ 原生支持，Safari 尚未实现。不要依赖 popovertarget 在所有环境生效。
关键兼容性事实：
- 没有
popovertargetaction这种“动作指定”机制 —— 显隐逻辑由popover值（auto或manual）和用户交互/JS 决定 -
popovertarget只在popover="auto"下有效，且仅响应点击（不支持 hover） - 服务端渲染或 SSR 页面中，若 JS 未加载，
popover="manual"的元素默认不可见，也不会意外弹出
真实项目中，建议始终用 popover="manual" + JS 控制，并包裹特性检测逻辑，比如：
if ('showPopover' in HTMLElement.prototype) {
// 使用原生 popover
} else {
// 回退到第三方库（如 tippy.js）或 CSS + JS 实现
}
别在属性名里脑补功能 —— 浏览器只认标准定义的那几个字符串，多写的属性等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
