HTMLElement : propriété popover

Baseline 2025 *

Newly available

Depuis ⁨January 2025⁩, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

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 :

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

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.");
}