Global attribute - popover

Typical use cases for the popover API include user-interactive elements like action menus, custom “toast” notifications, form element suggestions, content pickers, or teaching UI.

A related feature — interest invokers — can be used to show popovers on hover/focus, without requiring JavaScript.

Popover elements are hidden via display: none
until opened via an invoking/control element (i.e.
a or with a
popovertarget attribute) or a
HTMLElement.showPopover() call.

HTML attributes

• popover
  A global attribute that turns an element into a popover element; takes a popover state (“auto”, “hint”, or “manual”) as its value.

• popovertarget
  Turns a

or element into a popover control button; takes the ID of the popover element to control as its value.

popovertargetaction
Specifies the action to be performed (“hide”, “show”, or “toggle”) on the popover element being controlled by a control

or .

CSS features

• ::backdrop
  The ::backdrop pseudo-element is a full-screen element placed directly behind popover elements, allowing effects to be added to the page content behind the popover(s) if desired (for example blurring it out).

• :interest-source and :interest-target
  These selectors can be used to apply styles to the interest invoker and its associated target element, respectively, only when interest is indicated.

• :popover-open
  The :popover-open pseudo-class matches a popover element only when it is in the showing state — it can be used to style popover elements when they are showing.

Examples

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

<button popovertarget="my-popover"> Open Popover </button>
<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

Anchor positioning

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

Source MDN Popover API