HTMLElement : propriété popover

Baseline 2025 *
Newly available

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

* Some parts of this feature may have varying levels of support.

La propriété popover de l'interface HTMLElement récupère et définit l'état d'un élément popover via JavaScript ("auto" ou "manual"), et peut être utilisée pour la détection de fonctionnalités.

Elle reflète la valeur de l'attribut HTML global popover.

Valeur

Une valeur énumérée ; les valeurs possibles sont :

"auto"

Dans l'état automatique :

  • Le popover peut être masqué en cliquant en dehors de la zone ou en appuyant sur la touche Esc (light-dismissed).
  • Habituellement, un seul popover peut être affiché à la fois : afficher un deuxième popover alors qu'un autre est déjà affiché masquera le premier. Les popovers automatiques imbriqués sont la seule exception à cette règle. Voir la section sur les popovers imbriqués pour plus de détails.
"manual"

Dans l'état manuel :

  • Le popover ne peut pas être fermé en cliquant en dehors de la zone ou avec Esc, les boutons déclaratifs d'affichage/masquage/basculement fonctionneront toujours.
  • Plusieurs popovers indépendants peuvent être affichés en même temps.

Exemples

Détection de fonctionnalités

Vous pouvez utiliser l'attribut popover pour détecter la prise en charge de l'API Popover :

js
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

Configuration d'un popover de manière programmatique

js
const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

const popoverSupported = supportsPopover();

if (popoverSupported) {
  popover.popover = "auto";
  toggleBtn.popoverTargetElement = popover;
  toggleBtn.popoverTargetAction = "toggle";
} else {
  console.log("L'API Popover n'est pas prise en charge.");
}

Spécifications

Specification
HTML
# dom-popover

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
popover
hint value
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
Has more compatibility info.

Voir aussi