Popover

Uses the native popover attribute. The browser handles light dismiss and focus; the enhancePopover behavior anchors position and dispatches re-toggle. Prefer a self-managing tag? The <re-popover> custom element wraps this same pattern.

Basic

Toggle popover

Native browser popover with custom styling.

Live example

<p>
  <button type="button" class="re-button" popovertarget="pop-1" id="pop-1-btn">
    Toggle popover
  </button>
</p>
<div class="re-popover" id="pop-1" popover data-re-popover>
  <p>Native browser popover with custom styling.</p>
</div>

Tones

Info Warning Danger

Info popover.

Warning popover.

Danger popover.

Live example

<p>
  <button
    type="button"
    class="re-button"
    data-variant="secondary"
    popovertarget="pop-info"
    id="pop-info-btn"
  >
    Info
  </button>
  <button
    type="button"
    class="re-button"
    data-variant="secondary"
    popovertarget="pop-warn"
    id="pop-warn-btn"
  >
    Warning
  </button>
  <button
    type="button"
    class="re-button"
    data-variant="secondary"
    popovertarget="pop-danger"
    id="pop-danger-btn"
  >
    Danger
  </button>
</p>
<div class="re-popover" id="pop-info" popover data-tone="info" data-re-popover>
  Info popover.
</div>
<div class="re-popover" id="pop-warn" popover data-tone="warning" data-re-popover>
  Warning popover.
</div>
<div class="re-popover" id="pop-danger" popover data-tone="danger" data-re-popover>
  Danger popover.
</div>

Accessibility

• Keyboard — All native. The trigger is a real <button>, so Tab focuses it and Enter/Space toggles the popover (the browser wires this through popovertarget). Because it’s an auto popover, Escape and a click outside light-dismiss it. enhancePopover only anchors position and fires re-toggle — it adds no keyboard handling of its own.
• Focus — The trigger shows the standard :focus-visible ring (--re-shadow-focus). The popover is non-modal, so there’s no focus trap: focus stays on the trigger and the page behind remains interactive.
• Semantics — The content is a native [popover] element; the browser owns the show/hide, light-dismiss, and top-layer behavior. No extra role or aria-* is applied — assistive tech relies on the native popover relationship established by popovertarget. Tones are conveyed by tinted background and border only; the data-tone value is not announced, so don’t rely on color alone for meaning — put any essential status in the popover’s text.

See the accessibility guide for cross-component conventions.