popover

• When open, the element will appear above all other elements on a separate top layer, and won't be influenced by parent elements position or overflow styling.
• The :popover-open CSS pseudo-selector can be used to style the element when it is open.
• The ::backdrop CSS pseudo-element can be used to style the backdrop that is displayed behind the element; for example, to dim unreachable content behind the modal dialog.
• <button> elements can open a popover by adding the popovertarget attribute, with a value matching the id of the element with the popover attribute.
• The beforetoggle and toggle events can be used to determine when an element with popover will change from an open or closed state.

The following will render a button which will open a popover element.

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

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

• The beforetoggle event
• The toggle event
• element.hidePopover()
• element.showPopover()
• element.togglePopover()
• The :popover-open pseudo-element
• The ::backdrop pseudo-element
• popover-polyfill