Popover API

ELI5 — The Vibe Check

The Popover API is a native HTML feature that lets you create popovers, tooltips, and menus without any JavaScript. Add the popover attribute to an element, add popovertarget to a button, and boom — clicking the button shows/hides the popover. It handles positioning, stacking context, focus management, and click-outside-to-dismiss automatically. The browser does all the work that JavaScript libraries used to do.

Real Talk

The Popover API is a built-in HTML/CSS feature (using the popover attribute) that provides native support for dismissible overlay content. Popovers automatically appear in the top layer (above all other content), handle light dismiss (click outside or Escape key), and manage focus. Combined with CSS Anchor Positioning, it eliminates the need for JavaScript popover libraries. Supported in all modern browsers since 2024.

Show Me The Code

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

<div id="my-popover" popover>
  <p>This is a native popover!</p>
  <p>Click outside or press Escape to close.</p>
</div>

<style>
  [popover] {
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #ccc;
  }
  [popover]::backdrop {
    background: rgba(0, 0, 0, 0.2);
  }
</style>

When You'll Hear This

"Use the Popover API for that dropdown — no JavaScript needed." / "Native popovers handle focus trapping and dismiss automatically."