popover

Floating panel with arbitrary content.

status: stable js: trigger support: popover-api

Preview

This overlay stays hidden until triggered — open it in the live demo →

<button popovertarget="X">Open</button><div class="popover" popover id="X">…</div>

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/popover.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add popover

Open via showPopover()/popovertarget; add role=dialog + aria-labelledby

.popover .popover-sm .popover-lg .popover-header .popover-title .popover-description .popover-footer

base/tokens