Popover自 2024 年 4 月起，此功能适用于最新设备和浏览器版本。在旧设备或浏览器中，此功能可能无法正常使用。
什么是 Popover
Popover API 提供了一个标准化、统一而又灵活的方法，使开发者能够在网页内容上方轻松展示浮动的弹出内容。这种弹出内容可以通过 HTML 属性进行声明式控制，或通过 JavaScript 进行动态管理，从而为开发者提供操作的灵活性。
只需少量代码即可实现即可快速创建一个弹窗控件。例如，开发者可以简单地添加 HTML 标签和属性来实现一个基础的弹窗，或者使用 JavaScript 添加复杂的交互和动态内容。 特点包括：
-
易于使用：通过 HTML 的
data-属性或 JavaScript 方法，开发者可以快速创建和配置弹窗。 -
高度可定制：支持完全自定义弹窗的外观和感觉，包括动画、位置和大小。
-
无需关心 DOM 位置：Popover 在显示时会自动浮现于最前端，不依赖于在 DOM 中的具体位置，打开时，它会变成一个独立的图层放在”最前端“。
-
自动适应：支持响应式设计，自动调整以适合不同的屏幕和设备。
-
交互性强：开发者可以利用
popovertargetaction="hide"属性和ESC键控制关闭行为，增加用户交互的便捷性。
类似的API
Popover 与 dialog API 类似，后者从 2022 年起已被主流浏览器支持。它的使用同样非常直接，不过 dialog 在显示时会默认添加一个背景层，并以独立图层的形式显示在前端。
总结一下
Popover API 是一种新的 Web API，从 2024 年 4 月起在最新的设备和浏览器中可用。它允许开发者以最小的代码实现高度可定制的弹出窗口，这些窗口可以通过 HTML 或 JavaScript 控制，并能自动适应在前端显示，不受 DOM 结构的限制。此外，dialog API 与 Popover 在功能上相似，但包含默认背景层，两者都提供了现代 Web 应用中弹窗功能的优雅实现。
更多详细API，可参考 MDN：developer.mozilla.org/en-US/docs/…
