Global attribute - popover

Used to designate an element as a popover element.

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.

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