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 全局属性 用于将元素指定为弹出元素。

¥The popover global attribute is used to designate an element as a popover element.

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

¥Popover elements are hidden via display: none until opened via an invoking/control element (i.e. a <button> or <input type="button"> with a popovertarget attribute) or a HTMLElement.showPopover() call.

打开时，弹出框元素将显示在 top layer 中所有其他元素之上，并且不会受到父元素的 position 或 overflow 样式的影响。

¥When open, popover elements will appear above all other elements in the top layer, and won't be influenced by parent elements' position or overflow styling.

弹出窗口属性可以具有值 "auto"（默认）或 "manual"。具有 auto 状态的弹出窗口可以通过选择弹出窗口区域之外的方式变为 "光被驳回"，并且通常一次只允许在屏幕上显示一个弹出窗口。相比之下，manual 弹出窗口必须始终显式隐藏，但允许使用场景，例如菜单中的嵌套弹出窗口。

¥A popover attribute can have values "auto" (default) or "manual". Popovers that have the auto state can be "light dismissed" by selecting outside the popover area, and generally only allow one popover to be displayed on-screen at a time. By contrast, manual popovers must always be explicitly hidden, but allow for use cases such as nested popovers in menus.

有关使用的详细信息，请参阅 Popover API 登录页面。

¥For detailed information on usage, see the Popover API landing page.

示例

¥Examples

下面呈现一个按钮，激活时将打开弹出框元素。

¥The following renders a button that will open a popover element when activated.

html
<button popovertarget="my-popover">Open Popover</button>

<div popover id="my-popover">Greetings, one and all!</div>

注意：请参阅我们的 Popover API 示例登陆页面 以访问 MDN 弹出窗口示例的完整集合。

¥Note: See our Popover API examples landing page to access the full collection of MDN popover examples.

规范

Specification
HTML Standard
# the-popover-attribute

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also