Popover API playground

Create non-modal top-layer content with the popover attribute. Compare declarative controls and JavaScript, test light dismiss, and copy reusable HTML, CSS, and JS.

Choose a configuration as a starting point, then adjust any control.

Configuration

Interactivity

HTML uses popovertarget and popovertargetaction. JavaScript uses showPopover(), togglePopover(), and hidePopover().

HTMLJavaScript

Behavior

popover

auto supports light dismiss and closes other auto popovers; hint is intended for transient help; manual only changes through an explicit action.

Opening action

toggle alternates the state; show only attempts to display it. The inner button always uses hide so an explicit exit remains available.

Position

Presentation

Apply custom CSS

Turn it off to test the popover using only the browser default styles. Position, ::backdrop, and animation require custom CSS.

Show ::backdrop

::backdrop decorates the content behind the popover, but it does not make the popover modal or block the page.

Animate entry and exit

The transition uses display and overlay with allow-discrete, @starting-style, and a no-motion alternative for prefers-reduced-motion.

Content

Opening button text

Close button text

Popover title

Popover text

HTML

<button type="button" popovertarget="feature-popover" popovertargetaction="toggle">
  Open popover
</button>

<div
  class="popover-card"
  id="feature-popover"
  popover
>
  <h2>Actions panel</h2>
  <p>This content lives in the top layer without creating a modal.</p>
  <button type="button" popovertarget="feature-popover" popovertargetaction="hide">
    Close
  </button>
</div>

CSS

.popover-card {
  max-inline-size: min(24rem, calc(100vw - 2rem));
  padding: 1.25rem;
  border: 1px solid light-dark(#b8c3ee, #496096);
  border-radius: 1rem;
  background: light-dark(#fffdf7, #10182c);
  color: light-dark(#17203a, #f4f7ff);
  box-shadow: 0 1.25rem 3rem rgb(8 15 35 / 0.28);
  opacity: 0;
  transform: translateY(0.5rem) scale(0.98);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    display 180ms allow-discrete,
    overlay 180ms allow-discrete;
}

.popover-card:popover-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@starting-style {
  .popover-card:popover-open {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .popover-card {
    transition: none;
  }
}

.popover-card::backdrop {
  background: rgb(8 15 35 / 0.28);
  backdrop-filter: blur(3px);
}

.popover-card {
  max-inline-size: min(24rem, calc(100vw - 2rem));
  padding: 1.25rem;
  border: 1px solid light-dark(#b8c3ee, #496096);
  border-radius: 1rem;
  background: light-dark(#fffdf7, #10182c);
  color: light-dark(#17203a, #f4f7ff);
  box-shadow: 0 1.25rem 3rem rgb(8 15 35 / 0.28);
  opacity: 0;
  transform: translateY(0.5rem) scale(0.98);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    display 180ms allow-discrete,
    overlay 180ms allow-discrete;

  &:popover-open {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  &::backdrop {
    background: rgb(8 15 35 / 0.28);
    backdrop-filter: blur(3px);
  }
}

@starting-style {
  .popover-card:popover-open {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .popover-card {
    transition: none;
  }
}