The popover global attribute is used to specify that the element should be hidden on the page until it is opened by interacting with an invoking element (a <button> or <input type="button"> with a popovertarget), or manually via showPopover().

Usage notes

  • 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.


Simple example

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>


HTML Standard
# the-popover-attribute

Browser compatibility

BCD tables only load in the browser

See also