Attribut HTML universel : popover

Valeur

L'attribut popover peut prendre l'un des valeurs suivantes :

"auto"

Les fenêtres contextuelles auto peuvent être « fermée de façon légère » — cela signifie que vous pouvez masquer la fenêtre contextuelle en cliquant en dehors de celle-ci ou en appuyant sur la touche Esc. L'affichage d'une fenêtre contextuelle auto fermera généralement les autres popovers auto déjà affichés, sauf s'ils sont imbriqués.

Note : Définir une valeur vide pour popover — popover ou popover="" — équivaut à définir popover="auto".

"hint"

Les fenêtres contextuelles hint ne ferment pas les popovers auto lorsqu'elles sont affichées, mais fermeront les autres popovers hint. Elles peuvent être fermées de manière légère et répondront aux demandes de fermeture.

"manual"

Les fenêtres contextuelles manual ne peuvent pas être « fermées de façon légère » et ne se ferment pas automatiquement. Les popovers doivent être affichés et fermés explicitement à l'aide de boutons déclaratifs show/hide/toggle ou de JavaScript. Plusieurs popovers manual indépendants peuvent être affichés simultanément.

Description

Les éléments de fenêtres contextuelles sont masqués avec display: none jusqu'à ce qu'ils soient ouverts avec un élément déclencheur/de contrôle (c'est-à-dire un <button> ou <input type="button"> avec un attribut popovertarget) ou un appel à la méthode HTMLElement.showPopover().

Lorsqu'ils sont ouverts, les éléments de fenêtres contextuelles apparaissent au-dessus de tous les autres éléments dans la couche supérieure, et ne sont pas influencés par la position ou le débordement (overflow) des éléments parents.

Les fenêtres contextuelles ayant l'état auto peuvent être affichées et masquées à l'aide des contrôles associés (désignés par l'attribut popovertarget) et peuvent être « fermées de façon légère » en cliquant en dehors de la zone de la fenêtre contextuelle, en ouvrant une autre fenêtre contextuelle ou en utilisant des mécanismes spécifiques au navigateur tels que la touche Esc.

En général, une seule fenêtre contextuelle auto peut être affichée à l'écran à la fois — afficher une deuxième fenêtre contextuelle alors qu'une autre est déjà affichée masquera la première. L'exception à cette règle est lorsque vous avez des fenêtres contextuelles auto imbriquées. Voir Fenêtres contextuelles imbriquées pour plus de détails.

Elles peuvent également être contrôlées à l'aide de JavaScript, par exemple la méthode HTMLElement.togglePopover() peut être utilisée pour basculer une fenêtre contextuelle entre affichée et masquée.

En revanche, les fenêtres contextuelles manual doivent être affichées et masquées manuellement — elles ne ferment pas automatiquement les autres fenêtres contextuelles lorsqu'elles sont affichées et ne peuvent pas être fermées de manière légère. Cela permet des cas d'utilisation où vous souhaitez afficher plusieurs fenêtres contextuelles en même temps.

Les fenêtres contextuelles hint ne ferment pas les fenêtres contextuelles auto lorsqu'elles sont affichées, mais fermeront les autres fenêtres contextuelles hint. Elles peuvent être fermées de manière légère et répondront aux demandes de fermeture.

En général, les fenêtres contextuelles hint sont affichées et masquées en réponse à des évènements JavaScript autres que les clics, tels que mouseover/mouseout et focus/blur. Cliquer sur un bouton pour ouvrir une fenêtre contextuelle hint ferait fermer légèrement une fenêtre contextuelle auto ouverte.

Pour des informations détaillées sur l'utilisation, voir la page de destination de l'API Popover.

Exemples

Faire d'un élément une fenêtre contextuelle

Le code suivant rend un bouton qui, lorsqu'il est activé, ouvrira un élément de fenêtre contextuelle. Ce comportement peut être réalisé uniquement avec HTML.

<button popovertarget="my-popover">Ouvrir la fenêtre contextuelle</button>

<div popover id="my-popover">Bonjour à tous&nbsp;!</div>

Imbriquer des fenêtres contextuelles

Dans cet exemple, un bouton ouvre une fenêtre contextuelle qui contient des fenêtres contextuelles imbriquées supplémentaires. Les fenêtres contextuelles imbriquées peuvent être ouvertes sans fermer la fenêtre contextuelle du menu d'origine.

HTML

Dans la première partie du HTML, nous créons un <button> qui ouvrira la fenêtre contextuelle principale, qui est un menu contenant quelques options.

<header>
  <button popovertarget="menu">Ouvrir le menu</button>
</header>
<main>
  <!--  Le contenu de la page va ici  -->
</main>

Dans la deuxième partie du HTML, nous créons la fenêtre contextuelle du menu qui est ouverte par le bouton que nous avons créé dans le bloc de code précédent. Cette fenêtre contextuelle du menu contient une liste non ordonnée d'éléments de menu, chacun avec un bouton d'information qui ouvre une fenêtre contextuelle imbriquée. La fenêtre contextuelle du menu utilise popover="auto", ce qui signifie qu'elle ne sera pas fermée lorsque les fenêtres contextuelles imbriquées seront ouvertes.

<!-- menu contextuel -->
<div id="menu" popover="auto">
  <ul>
    <li>
      <a href="#">Nouveau contenu</a><button popovertarget="new-info">ⓘ</button>
    </li>
    <li>
      <a href="#">Ouvrir le contenu</a
      ><button popovertarget="open-info">ⓘ</button>
    </li>
    <li>
      <a href="#">Enregistrer le contenu</a
      ><button popovertarget="save-info">ⓘ</button>
    </li>
    <li>
      <a href="#">Fermer le contenu</a
      ><button popovertarget="close-info">ⓘ</button>
    </li>
  </ul>
</div>

Dans la dernière partie du HTML, nous créons les fenêtres contextuelles d'information pour chaque élément du menu. Chaque fenêtre contextuelle inclut popover="hint", ce qui signifie qu'elle ne fermera pas la fenêtre contextuelle du menu d'origine mais fermera les autres fenêtres contextuelles d'information ouvertes.

<!-- info popovers -->
<div id="new-info" class="info-popover" popover="hint">
  Ceci est une information sur la
  <strong>création d'un nouveau</strong> contenu.
</div>
<div id="open-info" class="info-popover" popover="hint">
  Ceci est une information sur l'<strong>ouverture d'un contenu existant</strong
  >.
</div>
<div id="save-info" class="info-popover" popover="hint">
  Ceci est une information sur
  <strong>l'enregistrement du contenu actuel</strong>.
</div>
<div id="close-info" class="info-popover" popover="hint">
  Ceci est une information sur <strong>la fermeture du contenu actuel</strong>.
</div>

CSS

header {
  display: flex;
  justify-content: center;
}
header button {
  margin: 0.4rem auto;
}

Nous avons utilisé le positionnement par ancre pour positionner la fenêtre contextuelle du menu sous le <button> et la grille pour disposer les éléments du menu et les boutons d'information.

#menu {
  margin: 0;
  margin-top: 0.4rem;
  inset: auto;
  position-area: bottom;
}
#menu ul {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem;
  padding: 0.4rem;
}
#menu li {
  grid-column: span 2;
  display: grid;
  grid: inherit;
  grid-template-columns: subgrid;
  gap: 1.4rem;
}
li [popovertarget] {
  cursor: pointer;
  font-size: 1.2rem;
}
li button {
  border: none;
  padding: 0;
  background-color: inherit;
}

Ici, nous avons utilisé le positionnement par ancre pour faire apparaître les fenêtres contextuelles d'information à droite de leurs boutons d'information respectifs.

div.info-popover {
  margin: 2rem;
  inset: auto;
  max-width: 300px;
  position-area: right;
}

Résultat

Cliquez sur le bouton Ouvrir le menu, puis cliquez sur les icônes d'information (ⓘ) à côté des options du menu pour ouvrir les fenêtres contextuelles d'information.

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'API Popover
• L'attribut HTML popovertarget
• L'attribut HTML popovertargetaction
• Le pseudo-élément CSS ::backdrop
• La pseudo-classe CSS :popover-open