popover

Baseline 2024

Newly available

Since April 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

popover 全局属性用来指定一个元素为弹出框元素（popover element）。

弹出框元素通过 display: none 被隐藏，直到通过调用/控制元素（即带有 popovertarget 属性的 <button> 或 <input type="button">）或 HTMLElement.showPopover() (en-US) 调用打开。

当打开时，弹出框元素将出现在所有其他元素之上，即在顶层 (en-US)上，并且不会受到父元素的 position 或 overflow 样式的影响。

popover 属性可以有 "auto" (en-US)（默认）或 "manual" (en-US) 的取值。具有 auto 状态的弹窗可以通过在弹窗之外的区域进行选择，以达到“轻触关闭”的目的，并且通常一次仅允许屏幕上显示一个弹窗。相比之下，manual 弹窗必须始终明确隐藏，但可以用于菜单中嵌套弹窗等使用情况。

有关更详细的使用信息，请参阅 Popover API (en-US) 页面。

示例

下述代码将呈现一个按钮，它将打开一个弹出框元素。

html
<button popovertarget="my-popover">打开弹出框</button>

<div popover id="my-popover">各位好！</div>

备注： 请参阅我们的弹出框 API 示例页面以访问所有的 MDN 弹出框示例。

规范

Specification
HTML Standard
# the-popover-attribute

浏览器兼容性

BCD tables only load in the browser

参见