Popover

A trigger and a free-form panel in the top layer — anchored under the button, light-dismissed, focus handled. Same machinery as the dropdown menu, pointed at arbitrary content.

popoveranchor positioningexit animations

PreviewCode

<button
  type="button"
  popovertarget="pop-dimensions"
  class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-lg border border-input bg-transparent px-4 text-sm font-medium whitespace-nowrap text-foreground transition-colors hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [anchor-name:--pop-dimensions]"
>
  <svg class="size-3.5 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <line x1="21" x2="14" y1="4" y2="4"></line>
    <line x1="10" x2="3" y1="4" y2="4"></line>
    <line x1="21" x2="12" y1="12" y2="12"></line>
    <line x1="8" x2="3" y1="12" y2="12"></line>
    <line x1="21" x2="16" y1="20" y2="20"></line>
    <line x1="12" x2="3" y1="20" y2="20"></line>
    <line x1="14" x2="14" y1="2" y2="6"></line>
    <line x1="8" x2="8" y1="10" y2="14"></line>
    <line x1="16" x2="16" y1="18" y2="22"></line>
  </svg>
  Dimensions
</button>

<div
  id="pop-dimensions"
  popover
  class="m-auto w-72 scale-95 rounded-lg border border-border bg-popover p-4 text-popover-foreground opacity-0 shadow-lg transition-[opacity,scale,overlay,display] transition-discrete duration-150 open:scale-100 open:opacity-100 starting:open:scale-95 starting:open:opacity-0 [position-anchor:--pop-dimensions] [position-area:block-end_span-inline-end] [position-try-fallbacks:flip-block] supports-[anchor-name:--a]:m-0 supports-[anchor-name:--a]:mt-1.5 supports-[anchor-name:--a]:origin-top-left"
>
  <div class="grid gap-4">
    <div class="space-y-1">
      <h3 class="text-sm leading-none font-medium">Dimensions</h3>
      <p class="text-sm text-muted-foreground">Set the size of the selected layer.</p>
    </div>
    <div class="grid grid-cols-[4.5rem_1fr] items-center gap-x-3 gap-y-2">
      <label for="pop-width" class="text-sm">Width</label>
      <input
        id="pop-width"
        type="text"
        inputmode="numeric"
        value="480"
        class="h-8 w-full rounded-md border border-input bg-background px-2.5 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring"
      />
      <label for="pop-max" class="text-sm">Max. width</label>
      <input
        id="pop-max"
        type="text"
        inputmode="numeric"
        value="960"
        class="h-8 w-full rounded-md border border-input bg-background px-2.5 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring"
      />
      <label for="pop-height" class="text-sm">Height</label>
      <input
        id="pop-height"
        type="text"
        inputmode="numeric"
        value="240"
        class="h-8 w-full rounded-md border border-input bg-background px-2.5 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring"
      />
    </div>
  </div>
</div>

Both float a panel in the top layer, both anchor under a trigger, both dismiss on Esc and outside click. The difference is the contents. A Dropdown Menu is a list of actions. A popover holds whatever you want: a little form, a set of controls, a preview. When the panel has inputs and labels rather than a column of commands, reach for this.

How it works

The popover attribute + popovertarget on the button give you top-layer rendering, toggling, Esc and click-outside dismiss. No JavaScript, no focus-trap library. Tab moves into the fields; Esc returns to the trigger.
CSS anchor positioning pins the panel under the button: [anchor-name:--pop-dimensions] on the trigger, then [position-anchor:--pop-dimensions] + [position-area:block-end_span-inline-end] on the panel (“below the anchor, growing to the right”).
[position-try-fallbacks:flip-block] flips the panel above when there’s no room below.
The inputs are plain <input>s. Because the panel lives in the top layer, they focus, type and tab exactly as they would in normal flow. The popover isn’t a rendering trick that traps them.

The fallback story

Without the Popover API the panel renders in normal document flow, always visible, and the button does nothing, so keep the markup somewhere sensible in the source order. Without anchor positioning the popover still opens, just centered in the viewport (the top-layer default) instead of pinned to the trigger; that’s why the base classes keep m-auto and only the offset is wrapped in a supports-[anchor-name:--a]: guard.

Browser support

Minimum stable version per engine, resolved at build time from MDN's browser-compat-data; Baseline status from the official web-features dataset. Everything degrades gracefully — the “when missing” column is the actual behavior, not a broken page.

Feature	Chrome	Edge	Firefox	Safari	When missing
Popover APIBaseline 2025 · newly available	114	114	125	17	Content renders in normal document flow, always visible, and the trigger does nothing.
CSS anchor positioningLimited availability	129	129	147	26	The popover opens centered in the viewport (the top-layer default) instead of attached to its trigger.
Entry/exit animations (allow-discrete + @starting-style)Baseline 2024 · newly available	117	117	129	17.5	Elements appear and disappear instantly. Nothing breaks — you just lose the animation.

† @supports cannot test at-rules, so the badge checks transition-behavior: allow-discrete, which co-shipped with @starting-style in every engine.

Dimensions

Popover vs Dropdown Menu

How it works

The fallback story

Browser support