Popover
A floating panel anchored to a trigger using the native
popover API and CSS anchor positioning.
Default
Connect a popovertarget button to a
[popover] element by matching IDs. The button acts as the
CSS anchor automatically — no extra markup needed.
This is a popover.
<button popovertarget="my-popover">Open</button>
<div id="my-popover" popover>Content</div>With card
Use an <article> inside for structured content with
header and footer sections.
<button popovertarget="my-popover">Options</button>
<div id="my-popover" popover>
<article>
<header><strong>Settings</strong></header>
<div>...</div>
<footer>
<button popovertarget="my-popover" popovertargetaction="hide">
Close
</button>
</footer>
</article>
</div>Placement
Use data-placement on the [popover] element
to control which side it appears on and which edges align. The value
is two space-separated words: side and alignment.
Without data-placement, the popover appears below the trigger
with automatic viewport fallbacks.
bottom left
Appears below the trigger, left edges aligned.
bottom right
Appears below the trigger, right edges aligned.
top left
Appears above the trigger, left edges aligned.
top right
Appears above the trigger, right edges aligned.
left top
Appears left of the trigger, top edges aligned.
left bottom
Appears left of the trigger, bottom edges aligned.
right top
Appears right of the trigger, top edges aligned.
right bottom
Appears right of the trigger, bottom edges aligned.
<button popovertarget="my-popover">Open</button>
<div id="my-popover" popover data-placement="right top">Content</div>