HTMLElement : propriété popover

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

Spécifications

Specification
HTML Standard # dom-popover

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

L'API Popover