Combine Anchor Positioning with the HTML Popover API

The Stack

The HTML Popover API ([popover], popovertarget, popovertargetaction) provides the show/hide behavior. CSS Anchor Positioning provides the placement. Together they give you a fully declarative popover with zero JavaScript.

<button popovertarget="info" class="info-btn">
  Show info
</button>

<div popover id="info" class="popover">
  Account created on March 14, 2026.
</div>

.info-btn {
  anchor-name: --info-btn;
}

.popover {
  position: absolute;
  position-anchor: --info-btn;
  position-area: top;
  margin-bottom: 8px;
  position-try-fallbacks: flip-block;

  /* Reset popover defaults */
  inset: auto;
  margin: 0 0 8px 0;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
}

What you get for free

The Popover API handles:

• Click trigger to open
• Click anywhere else to dismiss
• Escape key to dismiss
• Focus management (focus moves into the popover on open)
• Light dismiss vs auto dismiss (the popover attribute value controls this)
• Top-layer rendering (popovers escape overflow: hidden automatically)

You add anchor positioning to handle placement. The result is a tooltip/dropdown/popover with zero JavaScript and full keyboard accessibility.

popover="auto" vs popover="manual"

<div popover="auto">…</div>     <!-- light-dismiss; closes on outside click -->
<div popover="manual">…</div>   <!-- only closes via JS or popovertargetaction -->

For tooltips and dropdowns, popover (which defaults to "auto") is right. For wizards and step-by-step popovers where you want explicit control, use popover="manual" and add a Close button with popovertargetaction="hide".

Browser support

Popover API: Chrome 114+, Edge 114+, Safari 17+, Firefox 125+. Anchor positioning: Chrome 125+, Edge 125+, Safari 26+, Firefox not yet. So the combination lights up in Chrome/Edge 125+ and Safari 26+ — the same browsers anchor positioning otherwise needs.

The Popover API works without anchor positioning

If you just need show/hide for a centered modal-style popover, you don't need anchor positioning at all. Use popover alone with default centering. Add anchor positioning only when the popover should be attached to a trigger.