popover

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.

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

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

¥Specifications

¥Browser compatibility