Native Popovers
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]"
>
Anchor, no backdrop
</Button>
<div
popover="auto"
id="popover-anchor"
aria-labelledby="popover-anchor-title"
aria-describedby="popover-anchor-desc"
className="not-prose bg-card [position-anchor]:--trigger2 absolute inset-y-[unset] bottom-[anchor(top)] z-50 mb-1 max-w-3xs transform overflow-hidden rounded-lg border px-3 py-2 opacity-0 shadow-lg transition-[opacity,transform,translate,scale] transition-discrete duration-50 ease-out open:translate-y-0 open:scale-100 open:opacity-100 starting:open:translate-y-1 starting:open:scale-90 starting:open:opacity-0"
>
<h3 id="popover-anchor-title" className="mt-0 mb-1 text-sm font-medium">
Howdy!
</h3>
<p id="popover-anchor-desc" className="text-sm">
This should be accessible without any additional config
</p>
</div>Centered native popover
Uh oh — I'm exposed!
I'm set to popover="manual" so only this button will hide me.
<Button popoverTarget="popover-backdrop" variant="outline" className="relative">
Popover with backdrop
</Button>
<div
popover="auto"
id="popover-backdrop"
aria-labelledby="popover-backdrop-title"
aria-describedby="popover-backdrop-desc"
className="bg-card not-prose fixed inset-y-0 mx-auto my-auto transform overflow-hidden rounded-lg border p-4 opacity-0 shadow-2xl transition-[opacity,transform,translate,scale] transition-discrete duration-300 backdrop:bg-transparent backdrop:transition-colors open:translate-y-0 open:scale-100 open:opacity-100 open:backdrop:bg-black/30 sm:w-full sm:max-w-96 starting:open:translate-y-4 starting:open:scale-95 starting:open:opacity-0 starting:open:backdrop:bg-transparent"
>
<h2 id="popover-backdrop-title" className="mt-0 mb-3 text-base! font-medium text-pretty">
This is a native HTML popover. You can read up on{" "}
<a
href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API"
target="_blank"
rel="noreferrer"
className="link"
>
MDN
<IconArrowUpRight />
</a>
.
</Heading>
<p id="popover-backdrop-desc">
Click outside or press <Code>Esc</Code> to dismiss.
</p>
</div>With backdrop
This is a native HTML popover. You can read up on MDN.
Click outside or press Esc to dismiss.
<Button popoverTarget="popover-backdrop" variant="outline" className="relative">
Popover with backdrop
</Button>
<div
popover="auto"
id="popover-backdrop"
aria-labelledby="popover-backdrop-title"
aria-describedby="popover-backdrop-desc"
className="bg-card not-prose fixed inset-y-0 mx-auto my-auto transform overflow-hidden rounded-lg border p-4 opacity-0 shadow-2xl transition-[opacity,transform,translate,scale] transition-discrete duration-300 backdrop:bg-transparent backdrop:transition-colors open:translate-y-0 open:scale-100 open:opacity-100 open:backdrop:bg-black/30 sm:w-full sm:max-w-96 starting:open:translate-y-4 starting:open:scale-95 starting:open:opacity-0 starting:open:backdrop:bg-transparent"
>
<h2 id="popover-backdrop-title" className="mt-0 mb-3 text-base! font-medium text-pretty">
This is a native HTML popover. You can read up on{" "}
<a
href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API"
target="_blank"
rel="noreferrer"
className="link"
>
MDN
<IconArrowUpRight />
</a>
.
</Heading>
<p id="popover-backdrop-desc">
Click outside or press <Code>Esc</Code> to dismiss.
</p>
</div>With backdrop
The Danger Zone
Did you try unplugging it?
<Button popoverTarget="popover-backdrop" variant="outline" className="relative">
Popover with backdrop
</Button>
<div
popover="auto"
id="popover-backdrop"
aria-labelledby="popover-backdrop-title"
aria-describedby="popover-backdrop-desc"
className="bg-card not-prose fixed inset-y-0 mx-auto my-auto transform overflow-hidden rounded-lg border p-4 opacity-0 shadow-2xl transition-[opacity,transform,translate,scale] transition-discrete duration-300 backdrop:bg-transparent backdrop:transition-colors open:translate-y-0 open:scale-100 open:opacity-100 open:backdrop:bg-black/30 sm:w-full sm:max-w-96 starting:open:translate-y-4 starting:open:scale-95 starting:open:opacity-0 starting:open:backdrop:bg-transparent"
>
<h2 id="popover-backdrop-title" className="mt-0 mb-3 text-base! font-medium text-pretty">
This is a native HTML popover. You can read up on{" "}
<a
href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API"
target="_blank"
rel="noreferrer"
className="link"
>
MDN
<IconArrowUpRight />
</a>
.
</Heading>
<p id="popover-backdrop-desc">
Click outside or press <Code>Esc</Code> to dismiss.
</p>
</div>