:popover-open

Baseline 2024

Newly available

Since April 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

La pseudo-classe CSS :popover-open représente un élément popover (c'est-à-dire un élément avec un attribut popover) qui est dans l'état ouvert. Vous pouvez l'utiliser pour appliquer un style aux éléments popovers uniquement lorsqu'ils sont affichés.

Syntaxe

css

:popover-open {
  /* ... */
}

Exemples

CSS

Par défaut, les popovers apparaissent au milieu de la zone d'affichage (viewport). Le style par défaut porté par la feuille de styles de l'agent utilisateur ressemble à ceci :

css

[popover] {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 0.25em;
  overflow: auto;
  color: CanvasText;
  background-color: Canvas;
}

Pour surcharger les styles par défaut et faire apparaître le popover ailleurs, vous pouvez remplacer les styles ci-dessus par quelque chose comme :

css

:popover-open {
  width: 200px;
  height: 100px;
  position: absolute;
  inset: unset;
  bottom: 5px;
  right: 5px;
  margin: 0;
}

HTML

html

<button popovertarget="monpopo">Afficher/masquer le popover</button>

<div id="monpopo" popover="manual">Coucou ? Caché ?</div>

Résultat

Spécifications

Specification
HTML Standard # selector-popover-open

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

L'API Popover