Components / Overlays & Dialogs / Popover

Popover beta

A small panel anchored to its trigger — for detail that does not deserve a page.

Preview

Uses: Button — include its CSS alongside this one.

<div class="kpop-wrap" data-popover>
  <button class="btn btn-pri btn-md" data-popover-btn aria-expanded="false" aria-haspopup="true">Share</button>
  <div class="kpop" data-popover-panel role="dialog" aria-label="Share">
    <div class="kpop-h">Share this page</div>
    <p class="kpop-p">Anyone with the link can view it. No sign-in needed, and the link can be revoked at any time.</p>
    <div class="kpop-row">
      <button class="btn btn-sec btn-sm">Copy link</button>
      <button class="btn btn-sec btn-sm">Permissions</button>
    </div>
  </div>
</div>

.kpop-wrap{position:relative;display:inline-block;font-family:var(--k-font)}
.kpop{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,4px);width:272px;background:var(--k-bg);border:1px solid var(--k-line);border-radius:var(--k-radius-lg);box-shadow:0 18px 44px -14px rgba(16,24,40,.28);padding:16px;opacity:0;pointer-events:none;transition:opacity var(--k-dur-1) var(--k-ease),transform var(--k-dur-1) var(--k-ease);z-index:20;text-align:left}
.kpop.open{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.kpop-h{font-size:13.5px;font-weight:600;color:var(--k-ink)}
.kpop-p{margin-top:6px;font-size:12.5px;line-height:1.75;color:var(--k-ink-2)}
.kpop-row{display:flex;gap:8px;margin-top:14px}

const wrap = document.querySelector('[data-popover]');
const popBtn = wrap.querySelector('[data-popover-btn]');
const popPanel = wrap.querySelector('[data-popover-panel]');
function setPop(open) {
  popPanel.classList.toggle('open', open);
  popBtn.setAttribute('aria-expanded', String(open));
}
popBtn.addEventListener('click', () => setPop(!popPanel.classList.contains('open')));
document.addEventListener('click', e => { if (!wrap.contains(e.target)) setPop(false); });
document.addEventListener('keydown', e => { if (e.key === 'Escape') { setPop(false); popBtn.focus(); } });

Usage

For rich, short content tied to one element: share panels, quick info, mini forms. Not for plain text — that is the Tooltip.

Accessibility

Toggle with aria-expanded on the trigger. Escape and outside clicks close it; focus returns to the trigger.

Related parts

Alert Dialog beta

The decision that cannot be clicked away — for destructive, irreversible actions.

confirmdestructiveoverlay

Command beta

The ⌘K palette: one input that searches actions and pages, driven from the keyboard.

palettesearchkeyboard

Context Menu beta

The right-click menu, written as a component instead of an accident of the browser.

right-clickmenu

Drawer beta

A panel that slides in from the edge — detail and forms without losing the page.

panelslide-inoverlay

Modal

Tooltip