kit

Popover

A small panel beside the button that opened it, on the native popover attribute, for details, help and quick settings.

Tier 2 · behaviour Native popover beta

Example

Popover title

Supporting text. Press Escape or click outside to close it.

This one opens above its button, when there's room.

Show the markup 
<div class="kit-cluster" data-gap="3">
  <button class="kit-button" popovertarget="demo-pop">Open popover</button>
  <button class="kit-button" data-variant="ghost" popovertarget="demo-pop-top">Above</button>
</div>
<div popover id="demo-pop" class="kit-popover">
  <p class="kit-popover-title">Popover title</p>
  <p>Supporting text. Press Escape or click outside to close it.</p>
  <div class="kit-cluster" data-gap="2"><button class="kit-button" data-size="sm" data-variant="primary" popovertarget="demo-pop" popovertargetaction="hide">Done</button></div>
</div>
<div popover id="demo-pop-top" class="kit-popover" data-placement="top" data-size="sm">
  <p>This one opens above its button, when there's room.</p>
</div>

Usage

<button class="kit-button" popovertarget="help">What's this?</button>
<div popover id="help" class="kit-popover">
  <p class="kit-popover-title">Title</p>
  <p>Supporting text.</p>
</div>

The browser opens and closes it: the button toggles it, Escape and a click outside close it, and opening one closes any other. popover.js (in kit.js) places it beside the button, flipping and sliding to stay on screen, and does all of this itself in browsers without popovers (before Safari 17 and Firefox 125).

Attribute Values Default
data-placement bottom-start, bottom-end, top-start, right, … bottom-start
data-anchor the id of an element to sit beside instead of the button the button
data-size sm 14rem, md 20rem, lg 28rem md
popover="manual" only its button (or script) closes it auto, light dismiss

Use a popover for something people look at and then leave. For choosing an action, use a menu; for a task with buttons that must be answered, a dialog.

Accessibility

  • The button announces whether the popover is expanded.
  • The popover isn't modal: focus stays on the button when it opens, and Tab moves into the popover's content next. Escape closes it and returns focus to the button.
  • If the popover is a labelled region worth finding again, give it role="region" and an aria-label; for one line of help, a tooltip may suit better.