CSS Popover API: Native Dropdowns and Overlays Without JavaScript

1. What the CSS Popover API Actually Solves

For a long time, building dropdowns, tooltips, and modal overlays on the web was a task that inevitably required JavaScript. Developers reached for libraries such as Popper.js, Floating UI, or Tippy.js to handle positioning, keyboard navigation, focus management, and closing on an outside click. This led to significant JavaScript overhead, dependencies that needed maintenance, and accessibility issues that were easy to miss. The CSS Popover API solves this problem at the browser level.

The popover attribute is a native HTML attribute that has been fully supported since Chrome 114, Firefox 125, and Safari 17. It places an element in the so-called top layer, a rendering layer that sits above everything else in the document, including elements with a high z-index. That means no more stacking-context problems and no manual z-index management. The Popover API takes over the entire lifecycle: opening, closing via the Escape key, light dismiss on an outside click, and focus management.

From an accessibility standpoint, this is a huge step forward. The browser automatically sets the correct ARIA attributes once the trigger button is linked via popovertarget. Screen readers get the correct semantic connection between the button and the opened content without developers having to manually set aria-expanded, aria-controls, or aria-haspopup. The CSS Popover API is therefore not just a technical improvement, but an accessibility improvement too.

2. The Core Principle: the popover Attribute and popovertarget

A minimal implementation of the Popover API needs two HTML attributes: the element that should act as the popover gets the popover attribute. The button that should open the popover gets the popovertarget attribute, whose value matches the id of the popover element. That is the complete implementation: no JavaScript, no event listener, no CSS strictly required. The browser fully handles opening, closing, Escape handling, and light dismiss.

By default, the browser renders popover elements hidden. They exist in the DOM but are not visible until they are opened. Unlike display: none, they remain present in the accessibility tree, which improves screen reader support. The position of the popover within the HTML document has no bearing on its visual placement, since it is always rendered in the top layer and overlays every other element.

/* Basic popover styling: browser handles open/close behavior */
[popover] {
  /* Reset browser default positioning */
  margin: 0;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(74, 29, 150, 0.18), 0 2px 8px rgba(0,0,0,0.10);
  background: #fff;
  max-width: min(90vw, 360px);

  /* Anchor positioning relative to trigger */
  position-anchor: --my-trigger;
  top: calc(anchor(bottom) + 8px);
  left: anchor(left);
}

/* The trigger button */
.popover-trigger {
  anchor-name: --my-trigger;
  background: #7c3aed;
  color: #fff;
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 600;
}

/* Transition for smooth appearance */
[popover] {
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
}

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

3. ::backdrop: the Native Overlay Effect

The ::backdrop pseudo-element is an automatically generated element that the browser places behind an open popover in the top layer. It stretches across the entire viewport and can be styled with CSS to create a dimming effect. The ::backdrop element exists only in the top layer, so it is completely isolated from the normal document flow. For modal dialogs and overlays, this is the native alternative to the manually created backdrop divs that used to be inserted with JavaScript.

With popover="auto", the browser does not render a visible backdrop by default: it is present, but transparent. It only becomes visible through explicit CSS styling. With the <dialog> element and showModal(), ::backdrop is also available and is commonly used for modal dialogs. Combining the Popover API with ::backdrop fully replaces the classic approach of laying a semi-transparent div over the whole page and managing its z-index.

/* Backdrop styling for modal popovers */
[popover]::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);

  /* Animate backdrop separately */
  transition: opacity 0.25s ease;
  opacity: 0;
}

[popover]:popover-open::backdrop {
  opacity: 1;
}

/* For @starting-style animation support */
@starting-style {
  [popover]:popover-open::backdrop {
    opacity: 0;
  }
}

/* Backdrop for modal dialog: same mechanism */
dialog::backdrop {
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.70) 0%,
    rgba(74, 29, 150, 0.40) 100%
  );
  backdrop-filter: blur(4px) saturate(0.8);
}

4. :popover-open: State-Based Styling

The :popover-open pseudo-class matches a popover element exactly when it is open and visible. It is the CSS equivalent of the popover's programmatic state and enables state-based styling without JavaScript. This makes it possible not only to define animations for the popover itself, but also to style trigger buttons differently: with the :has() selector, a parent element can be styled differently while its popover is open.

The :popover-open pseudo-class works much like :checked or :focus: it is part of the browser's native CSS state model. That means no JavaScript class such as .is-open needs to be set manually. Transitions based on :popover-open work together with @starting-style to define entry animations as well, something that was not normally possible in CSS, since transitions only worked for state changes, not for an element's initial appearance.

5. popover="auto" vs. popover="manual"

The CSS Popover API has two behavior modes. popover="auto" is the default mode with light-dismiss behavior: a click outside the popover closes it automatically. In addition, only one popover="auto" element can be open at a time; opening a second one automatically closes the first. That is the expected behavior for dropdown menus and tooltips. popover="manual", on the other hand, has no light dismiss and does not automatically close other popovers. It must be controlled programmatically via JavaScript or an explicit close button.

For most UI patterns, popover="auto" is the right choice. popover="manual" suits scenarios where several popovers need to be visible at the same time, for example a notification stack or several independent tooltips in a complex dashboard. The difference in behavior resembles the difference between a non-modal dialog and a modal dialog. The Popover API covers both use cases.

6. Tooltip Pattern With the Popover API

Tooltips are one of the most common use cases for the CSS Popover API. With CSS Anchor Positioning, which was introduced alongside the Popover API, a tooltip can be positioned precisely relative to its trigger element, with no JavaScript positioning logic required. The tooltip element gets popover="hint" (or popover="auto") and is linked to the trigger via position-anchor. The browser calculates the optimal position automatically and can try alternative positions with position-try-fallbacks when the preferred space is not enough.

A common problem with tooltip implementations is the interaction with keyboard navigation. Traditionally, tooltips were controlled with CSS via :hover and :focus, which caused issues whenever the content itself needed to be focusable. With the Popover API, this problem goes away: the browser manages focus correctly, and keyboard users can open the popover as expected and close it with Escape.

/* Tooltip positioning with CSS Anchor Positioning */
.tooltip-trigger {
  anchor-name: --tooltip-anchor;
  position: relative;
  cursor: help;
  border-bottom: 1px dashed #7c3aed;
  text-decoration: none;
  color: inherit;
}

[popover].tooltip {
  /* Anchor this popover to the trigger */
  position-anchor: --tooltip-anchor;
  position: absolute;

  /* Default: appear above the trigger */
  bottom: calc(anchor(top) + 8px);
  left: anchor(center);
  translate: -50% 0;

  /* Fallback positions if space is limited */
  position-try-fallbacks:
    --below,
    --left,
    --right;

  /* Tooltip visual style */
  background: #1e1b4b;
  color: #ede9fe;
  padding: 0.4rem 0.8rem;
  border-radius: 0.4rem;
  font-size: 0.8rem;
  max-width: 240px;
  white-space: normal;
  pointer-events: none;
}

/* Fallback: below the trigger */
@position-try --below {
  top: calc(anchor(bottom) + 8px);
  bottom: auto;
}

/* Fade-in animation */
@starting-style {
  [popover].tooltip:popover-open {
    opacity: 0;
    scale: 0.92;
  }
}

[popover].tooltip {
  transition: opacity 0.15s ease, scale 0.15s ease;
  opacity: 0;
  scale: 1;
}

[popover].tooltip:popover-open {
  opacity: 1;
  scale: 1;
}

7. Navigation Dropdown With popover

Navigation dropdowns are the second classic use case for the Popover API. A navigation menu with multiple levels can be implemented entirely without JavaScript, as long as the requirements match the native behavior: open on click, automatically close on an outside click, close with Escape. For hover dropdowns, the Popover API alone is not enough; here, JavaScript or at least a :hover-based CSS solution is still needed, since the native popover attribute does not support a hover trigger.

A practical pattern for navigation dropdowns combines the Popover API with popover="auto" and CSS Anchor Positioning. The trigger button opens the dropdown, which positions itself directly under the button. Since popover="auto" only ever leaves one dropdown open at a time, opening a new dropdown automatically closes the previous one, which is exactly the expected behavior for a main navigation bar.

8. Fade-In Animations With @starting-style

One long-standing limitation of CSS transitions was that they only worked for state changes on elements that were already rendered. The initial appearance of an element, for example when a popover switches from display: none to display: block, could not be animated with CSS alone. The @starting-style rule solves this problem. It defines the CSS starting state for an entry transition: when an element becomes visible for the first time, the browser starts a transition from the @starting-style state to the normal state.

For the CSS Popover API, @starting-style is especially relevant because popovers switch from invisible to visible when they open. Without @starting-style, transitions would not run on open, only on close. With @starting-style, both entry and exit transitions can be defined, resulting in a fully animated open and close. The allow-discrete keyword in the transition property is required whenever display or visibility is part of the transition.

/* Full open/close animation for popover using @starting-style */
[popover].menu {
  /* These properties will be transitioned */
  transition:
    opacity 0.22s ease,
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    display 0.22s allow-discrete,
    overlay 0.22s allow-discrete;

  /* Closed state */
  opacity: 0;
  transform: translateY(-10px) scale(0.96);
}

/* Open state */
[popover].menu:popover-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Entry: where the animation starts FROM when opening */
@starting-style {
  [popover].menu:popover-open {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }
}

/* Staggered children animation */
[popover].menu li {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

[popover].menu:popover-open li {
  opacity: 1;
  transform: translateX(0);
}

[popover].menu:popover-open li:nth-child(1) { transition-delay: 0.04s; }
[popover].menu:popover-open li:nth-child(2) { transition-delay: 0.08s; }
[popover].menu:popover-open li:nth-child(3) { transition-delay: 0.12s; }

9. The Popover API in Direct Comparison

The CSS Popover API is not the only native browser feature for overlaying UI elements. Comparing it with <dialog>, details/summary, and pure CSS solutions highlights the strengths and limits of each approach.

The decisive advantage of the Popover API over <dialog> is light-dismiss behavior without JavaScript. For dropdowns and tooltips, that is the more natural solution. The advantage over details/summary lies in the top layer: popover elements can extend beyond other elements and are not clipped by overflow: hidden on parent elements, which used to be one of the most common problems with dropdown implementations.

10. Summary

The CSS Popover API is a fundamental step forward for the web frontend. With the native popover attribute, ::backdrop, the :popover-open pseudo-class, and its integration with CSS Anchor Positioning, dropdowns, tooltips, and overlays can be implemented entirely without JavaScript. The browser takes over top-layer rendering, light-dismiss behavior, Escape handling, and focus management, all tasks that used to require JavaScript libraries.

The distinction between popover="auto" and popover="manual" covers the two most common use cases: dropdowns and tooltips with automatic closing on one hand, and complex UI patterns with multiple simultaneous popovers on the other. With @starting-style and allow-discrete, fully animated open and close transitions are possible too. The CSS Popover API is available in all modern browsers today and can be adopted progressively with a simple feature check.

11. FAQ: CSS Popover API