:popover-open

The CSS :popover-open pseudo-class is part of the Popover API that selects a popover element and styles the popover when it is in its “open” state.

/* Select any open popover */
:popover-open {
  /* Styles */
}

/* Select a specific popover */
#toggletip:popover-open {
  /* Styles */
}

Some context

The Popover API — at its most basic level — lets us define any element on the page as a “popover” which is an element that can toggle its visibility on and off by clicking on another “target” element, such as a <button> (or an <input>-flavored button).

<button popovertarget=“wave”>Say Hello</button>
<div popover id=“wave”>👋</div>

The popover element is display: hidden by default, or its “closed” state. When we click the button, the popover pops up in its “open” state.

That open state is what we’re talking about with the :popover-open pseudo-class. It allows us to select the popover and apply styles to it when — and only when — it is open.

Default styles

Did you notice in that last example how the popover is perfectly centered on the page when open? We didn’t even write any CSS in there!

As with many selectors, browsers apply “default” styles to the [popover] attribute. We can see them in Chrome DevTools.

[popover] {
  position: fixed;
  width: fit-content;
  height: fit-content;
  color: canvastext;
  background-color: canvas;
  inset: 0px;
  margin: auto;
  border-width: initial;
  border-style: solid;
  border-color: initial;
  border-image: initial;
  padding: 0.25em;
  overflow: auto;
}

This is what plops a popover dead center on the page and we have to override them if we want to re-position it to pop in a different location, change its dimensions, or what have you. The :popover-open pseudo-element is perfect for overriding these styles since it only applies styles when the popover is in its open state, taking precedence over the default styles.

:popover-open {
  background-color: hsl(25 100% 50%);
  border: 0;
  color: hsl(300 50% 3% / .85);
  padding: 1.5rem;
  width: 25ch;
}

Specification

The CSS :popover-open pseudo-class is defined in the HTML Standard.

Browser support

IE	Chrome	Edge	Firefox	Safari	Opera
No	114	114	125	17	101

Safari iOS	Chrome Android	Firefox Android	Android Browser	Opera Mobile	Samsung Internet
17	125	126	23	80	125

Related