HTMLElement : propriété popover

Valeur

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

"auto"

Dans l'état auto des fenêtres contextuelles, elles peuvent être masquées en cliquant en dehors de la zone ou en appuyant sur la touche Esc (light-dismissed).

Habituellement, une seule fenêtre contextuelle peut être affichée à la fois : en afficher une deuxième alors qu'une autre est déjà affichée masquera la première. Les fenêtres contextuelles automatiques imbriquées sont la seule exception à cette règle. Voir la section sur les popovers imbriquées pour plus de détails.

"hint" Expérimental

Les fenêtres contextuelles hint n'entraînent pas la fermeture des fenêtres contextuelles auto lorsqu'elles sont affichées, mais fermeront les autres fenêtres contextuelles d'indication. Elles peuvent être masquées par fermeture légère et répondront aux demandes de fermeture.

Habituellement, elles sont affichées et masquées en réponse à des évènements JavaScript autres que le clic, comme mouseover/mouseout et focus/blur. Cliquer sur un bouton pour ouvrir une fenêtre contextuelle hint entraînera la fermeture légère d'une fenêtre contextuelle auto ouverte.

"manual"

Dans l'état manual des fenêtres contextuelles, elles ne peuvent pas être fermées en cliquant en dehors de la zone ou avec Esc, les boutons déclaratifs d'affichage/masquage/basculement fonctionneront toujours. Plusieurs fenêtres contextuelles indépendantes peuvent être affichées 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 Object.hasOwn(HTMLElement.prototype, "popover");
}

Configuration d'une fenêtre contextuelle de manière programmatique

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

Compatibilité des navigateurs

Voir aussi

• L'attribut HTML universel popover
• L'API Popover