↰PostsAugust 26, 2025

Native Popover Experiments

Playing with the native popover API, plus anchor positioning and starting-style.

Anchored

Howdy!

This should be accessible without any additional config

<Button
  popoverTarget="popover-anchor"
  variant="outline"
  className="[anchor-name:--trigger2]"
>
  Open popover
</Button>
<div
  popover="auto"
  id="popover-anchor"
  aria-labelledby="popover-anchor-title"
  aria-describedby="popover-anchor-desc"
  className="[position-anchor]:--trigger2 absolute inset-y-[unset] right-0 bottom-[anchor(top)] z-50 max-w-3xs origin-bottom translate-y-2 transform [justify-self:anchor-center] overflow-hidden rounded-lg bg-[canvas] px-3 py-2 opacity-0 shadow-border-lg transition-[opacity,transform,translate,scale] transition-discrete duration-50 ease-out open:mb-2 open:translate-y-0 open:scale-100 open:opacity-100 starting:open:mb-0 starting:open:translate-y-4 starting:open:scale-90 starting:open:opacity-0"
>
  <h3 id="popover-anchor-title" className="mt-0 mb-1 text-sm font-medium">…</h3>
  <p id="popover-anchor-desc" className="text-sm">…</p>
</div>

One thing I noticed: you seem to need transition-all on the popover content to get the exit transition working; transition-[properties]doesn't work, at least with Tailwind.

Here's a toast-y popover. In some countries, that's a meal. Regardless, you need to close this one manually rather than by clicking outside.

Toast-like

<Button id="popover-toast-trigger" popoverTarget="popover-toast" popoverTargetAction="show">…</Button>
<div
  popover="manual"
  id="popover-toast"
  aria-labelledby="popover-toast-title"
  aria-describedby="popover-toast-desc"
  className={cn(
    "fixed mx-auto grid origin-bottom transform auto-rows-min grid-cols-[auto_1fr_auto] grid-rows-[auto_auto] gap-2 rounded-lg bg-[canvas] p-3 shadow-lg outline outline-current/10 transition-[opacity,transform,translate,scale] transition-discrete duration-200 ease-out dark:-outline-offset-1",
    "inset-x-8 top-auto bottom-8 w-auto max-w-full",
    "md:right-8 md:left-auto md:max-w-96",
    "translate-y-2 scale-100 opacity-0",
    "starting:open:translate-y-1 starting:open:scale-90 starting:open:opacity-0",
    "open:translate-y-0 open:scale-100 open:opacity-100"
  )}
>
  <IconAlertCircle … />
  <h2 className="col-2 row-1 m-0 text-sm font-medium" id="popover-toast-title">…</h2>
  <p id="popover-toast-desc" className="col-2 row-2 text-sm">…</p>
  <Button
    popoverTarget="popover-toast"
    id="popover-toast-close"
    popoverTargetAction="hide"
    className="col-3 row-span-2 row-start-1"
  >
    Close
  </Button>
</div>

The next one has a backdrop just to see how it works. But don't be fooled, it's not modal, nor does it lock scroll position or focus. In reality, you might use a <dialog> here if you're going native.

With backdrop

<Button popoverTarget="popover-backdrop" variant="outline">
  With backdrop
</Button>
<div
  popover="auto"
  id="popover-backdrop"
  aria-labelledby="popover-backdrop-title"
  aria-describedby="popover-backdrop-desc"
  className={cn(
    "fixed inset-y-0 mx-auto my-auto overflow-hidden rounded-lg bg-[canvas] p-4 shadow-2xl outline outline-current/10 sm:w-full sm:max-w-96 dark:-outline-offset-1",
    "not-open:pointer-events-none",
    "transition-all transition-discrete duration-300",
    "origin-top translate-y-10 scale-92 opacity-0",
    "starting:open:translate-y-10 starting:open:scale-92 starting:open:opacity-0",
    "open:translate-y-0 open:scale-100 open:opacity-100",
    "backdrop:bg-transparent backdrop:transition-colors backdrop:duration-300 backdrop:pointer-events-none", 
    "starting:open:backdrop:bg-transparent"
    "open:backdrop:bg-black/15 dark:open:backdrop:bg-black/50",
  )}
>
  <h2 className="mb-3 text-base font-medium text-pretty" id="popover-backdrop-title">…</h2>
  <p id="popover-backdrop-desc">…</p>
</div>

You can have some fun with the backdrops too. This one also requires an explicit close.

Danger (manual)

<Button
  popoverTarget="popover-backdrop-2"
  id="popover-backdrop-2-trigger"
  popoverTargetAction="show"
>
  Danger ahead
</Button>
<div
  popover="manual"
  id="popover-backdrop-2"
  aria-labelledby="popover-backdrop-2-title"
  aria-describedby="popover-backdrop-2-desc"
  className={cn(
    "fixed inset-y-0 mx-auto mt-auto mb-8 flex w-full max-w-dialog origin-top translate-y-10 scale-98 transform flex-col gap-2 overflow-hidden rounded-2xl bg-error p-6 pt-10 text-center text-foreground opacity-0 shadow-2xl outline outline-destructive transition-[opacity,transform,translate,scale] transition-discrete duration-300 backdrop:bg-border backdrop:transition-colors backdrop:duration-300 open:translate-y-0 open:scale-100 open:opacity-100 open:backdrop:bg-destructive/30 sm:max-w-96 dark:-outline-offset-1 starting:open:translate-y-10 starting:open:scale-92 starting:open:opacity-0 starting:open:backdrop:bg-transparent",
    "items-center not-open:pointer-events-none backdrop:pointer-events-none backdrop:bg-[repeating-linear-gradient(315deg,var(--error)_0,var(--error)_1px,transparent_0,transparent_50%)] backdrop:bg-size-[10px_10px] backdrop:bg-fixed"
  )}
>
  <svg>…</svg>
  <h2 id="popover-backdrop-2-title">…</h2>
  <p id="popover-backdrop-2-desc">…</p>
  <Separator />
  <Button
    popoverTarget="popover-backdrop-2"
    id="popover-backdrop-2-close"
    popoverTargetAction="hide"
  >
    Flee
  </Button>
</div>

Native Popover Experiments

Howdy!

Uh oh — I'm exposed!

This is a native HTML popover. You can read up on MDN.

The Danger Zone