Click Popover

Designer Agent Kit — documentation written for AI agents, readable by humans.

Popup dialog on button click with auto-dismiss on click outside. Pure HTML using popovertarget, no component needed.

For hover triggers, use the popover-menu headless component instead.

Usage

<button popovertarget="info-popup">Show Info</button>
<div id="info-popup" popover>
  <p>This popup closes on click outside (light-dismiss).</p>
</div>

CSS

[popover] {
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

Style with :popover-open for transitions:

[popover] {
  opacity: 0;
  transition: opacity 0.2s;
}
[popover]:popover-open {
  opacity: 1;
}

Accessibility

The Popover API handles focus management, Escape-to-close, and light-dismiss natively. popovertarget is keyboard-accessible (Enter/Space). No additional ARIA attributes needed for basic usage.

---

About this document

This page is part of the Jay Stack Agent Kit — documentation generated from the framework source and written primarily for AI agents. The language and structure are optimized for machine consumption — expect precise, specification-style prose rather than narrative documentation. Learn more about the Agent Kit →