Popover et boîte de dialogue

Un popover est un élément doté d'un attribut popover. Il est utile pour un large éventail de modèles interactifs, y compris les info-bulles, les alertes, les toasts et plus encore.

<div id="my-popover" popover>My popover content</div>

L'attribut popover masque l'élément par défaut. Vous devez donc permettre aux utilisateurs de l'ouvrir. Bien que les pop-ups soient placés dans la couche supérieure, au-dessus de tout autre contenu, ils ne sont pas modaux. Cela signifie que vous pouvez toujours interagir avec le contenu en dehors du pop-up.

Contrôler les pop-overs

Avant d'explorer les différents types de pop-ups et leur comportement, découvrez comment ouvrir et fermer vos pop-ups.

de manière déclarative.

Les pop-overs peuvent être contrôlés entièrement en HTML, sans avoir à utiliser JavaScript, à l'aide de boutons (et d'entrées avec le type button) et de l'attribut popovertarget.

Le pop-over de l'extrait de code précédent a un id de my-popover, que vous pouvez utiliser pour faire référence au pop-over.

<button popovertarget="my-popover">Toggle</button>

Vous pouvez également spécifier si un bouton doit ouvrir ou fermer un popover à l'aide de popovertargetaction="show" et popovertargetaction="hide".

Avec JavaScript

Vous pouvez également contrôler un pop-over à l'aide de JavaScript, ce qui est utile lorsque vous souhaitez afficher un pop-over en réponse à autre chose qu'un clic sur un bouton par l'utilisateur. Pour ce faire, vous devez obtenir l'élément pop-up, puis appeler showPopover(), hidePopover() ou togglePopover().

Types de pop-ups

Lorsque vous ajoutez un pop-over à votre site, vous devez tenir compte de nombreuses interactions. Comment l'ouvrir ? Comment les utilisateurs peuvent-ils la fermer ? Qu'advient-il des autres pop-ups ouverts ? Il existe trois types de pop-overs. Vous pouvez choisir celui qui fournit le comportement et les interactions requis par votre cas d'utilisation.

Pop-overs automatiques

Les popovers automatiques sont ceux qui intègrent le plus de fonctionnalités. Ils sont définis par défaut si vous ne spécifiez pas de type.

<div id="popover" popover>My popover</div>

Dans de nombreux cas, vous ne souhaitez pas que plusieurs popovers soient ouverts en même temps. Par conséquent, les popovers automatiques ferment les autres popovers automatiques lorsqu'ils sont ouverts. Ils sont également compatibles avec la fermeture légère, ce qui signifie que si vous cliquez en dehors du popover, il se ferme automatiquement. Vous pouvez également le fermer à l'aide de la touche Échap.

Pop-ups manuels

Bien que le comportement de remplissage automatique des popovers couvre de nombreux cas d'utilisation, il peut arriver que vous ayez besoin de mieux contrôler vos popovers. Avec les pop-ups manuels, vous avez beaucoup plus de contrôle, mais vous êtes également responsable d'une grande partie du comportement.

<div id="popover" popover="manual">My popover</div>

Ce pop-over ne se ferme que lorsque vous le fermez explicitement. Il ne peut pas être fermé par une fermeture légère ni par la touche Esc. Il vous permet toutefois d'ouvrir plusieurs pop-ups simultanément.

Pop-overs d'indices

Vous pouvez également utiliser des popovers pour ajouter des info-bulles à votre page. Dans ce modèle, vous souhaitez pouvoir pointer sur un élément et afficher une description. Vous ne devez en ouvrir qu'un seul à la fois. Si vous utilisez des popovers automatiques, l'ouverture de l'un d'eux fermera tous les autres popovers automatiques ouverts. Si vous utilisez des popovers manuels, vous devez implémenter manuellement une grande partie du comportement, y compris la fermeture des autres popovers. Les popovers d'indices offrent une troisième option avec un comportement semblable à celui des popovers automatiques. Toutefois, l'ouverture d'un pop-over d'indice ne ferme pas les pop-overs automatiques.

<div id="popover" popover="hint">My popover</div>

Les pop-ups d'indices sont utiles pour les informations supplémentaires qui sont secondaires par rapport au contenu principal. Vous souhaiterez souvent déclencher des pop-ups d'indices avec des événements autres que des clics, comme le survol ou la sélection.

Positionner votre pop-over

Par défaut, vos pop-ups s'ouvrent au milieu de l'écran. Ils sont ajoutés au calque supérieur, au-dessus de tous vos autres contenus, et peuvent être positionnés par rapport à la fenêtre d'affichage.

Ce n'est pas toujours idéal, car vous souhaitez souvent placer votre pop-up près de l'élément qui le déclenche. Le positionnement d'ancrage permet de le faire.

Le positionnement d'ancrage se fait en deux étapes : définir l'élément d'ancrage et placer votre élément par rapport à cet ancrage. Les popovers peuvent gérer la première étape en définissant un ancrage implicite pour vous. Lorsque vous ouvrez un popover à l'aide de <button popovertarget>, le bouton est l'ancrage implicite. Si vous ouvrez un pop-over à l'aide de JavaScript, vous pouvez définir l'ancrage implicite avec l'option source.

Par défaut, un pop-over est centré à l'aide de margin: auto. Pour utiliser le positionnement d'ancrage, vous devrez probablement le remplacer en définissant margin: unset.

Styles et animations

Pseudo-élément ::backdrop

Les pop-overs s'ouvrent dans une couche supérieure, au-dessus de tout autre contenu de votre page. Un pseudo-élément ::backdrop pouvant être stylisé se trouve sous le pop-over.

Il est important de noter que le contenu en dehors d'un popover n'est pas inerte : vous pouvez toujours cliquer sur des boutons et utiliser votre clavier pour naviguer sur la page. Vous ne devez pas masquer le contenu de la page, par exemple en appliquant un effet de flou important ou en définissant l'arrière-plan sur une couleur opaque.

Pseudo-classe :popover-open

Imaginons que vous souhaitiez mettre en page le contenu de votre pop-over à l'aide de grilles CSS. Vous ajoutez [popover]{ display: grid } et, tout à coup, tous vos pop-ups sont visibles. En effet, les pop-ups sont masqués à l'aide de display: none. Vous pouvez utiliser la pseudo-classe :popover-open pour appliquer des styles uniquement lorsque le pop-up est ouvert.

[popover]{
/* Don't do this! All popovers will be visible.  */
  display: grid;
}

[popover]:popover-open {
/*  This will only affect open popovers. */
  display: grid;
}

:popover-open est également utile lorsque vous animez un pop-over.

Animer des pop-overs

L'animation d'un pop-over comporte trois étapes :

1. @starting-style {popover:popover-open { } } : styles initiaux du pop-over dès qu'il est visible. Notez que cela doit être défini dans votre feuille de style après l'étape 2.
2. popover:popover-open { } : styles du pop-over lorsqu'il est ouvert.
3. popover { } : styles vers lesquels le pop-over se déplace lorsqu'il se ferme.

Un popover est masqué à l'aide de display: none lorsqu'il n'est pas ouvert. Pour animer cela, vous devrez définir transition-behavior: allow-discrete et ajouter display à la liste des propriétés dans transition.

Si vous positionnez votre popover avec une ancre implicite, vous devrez également ajouter overlay à la liste des propriétés dans transition. La relation d'ancrage implicite est supprimée une fois le pop-over retiré de la couche supérieure. L'ajout d'une transition à la propriété overlay retarde cette suppression jusqu'à la fin de la transition de sortie.

Interactions entre les pop-overs

Vous aurez probablement plusieurs pop-ups sur une page. La façon dont elles interagissent dépend de leur type et de leur utilisation.

Popovers imbriqués

Dans certains cas, vous devrez peut-être ouvrir un popover à partir d'un autre popover. Par exemple, vous pouvez avoir un menu popover, et l'un des éléments de menu ouvre un sous-menu. Lorsque l'utilisateur ferme le menu principal, vous ne voulez pas que le sous-menu reste ouvert. Les pop-overs peuvent vous aider à gérer cela automatiquement.

Si vous ouvrez un popover d'indice à partir d'un popover d'indice, ou un popover automatique à partir d'un popover automatique, les popovers sont placés dans une pile. La fermeture d'un popover entraîne également la fermeture de tous les popovers qui le suivent dans la pile. Cela fonctionne également avec la fermeture légère : si vous cliquez sur un popover, tous les popovers qui le suivent dans la pile se fermeront, mais les popovers précédents resteront ouverts.

Un popover est ajouté à la pile si son élément source se trouve dans un popover. L'élément source est défini automatiquement lorsque vous utilisez popovertarget sur un bouton, ou avec JavaScript en définissant l'option source lorsque vous appelez .showPopover({source}) ou .togglePopover({source}).

Il existe une pile pour les pop-overs automatiques et une autre pour les pop-overs d'indices. Toutefois, si vous ouvrez un popover d'indice à partir d'un popover automatique, il est ajouté à la pile automatique.

N'oubliez pas que les pop-overs d'indices sont destinés à fournir des informations simples et temporaires. Vous ne pouvez donc pas déclencher de pop-over automatique à partir d'un pop-over d'indice.

Si vous utilisez des pop-ups manuels, vous devez gérer tout cela manuellement.

Fermer d'autres types de pop-overs

Vous avez appris que l'ouverture d'un popover automatique ferme les autres popovers automatiques. Mais comment les différents types interagissent-ils ? Prenons l'exemple d'une page qui utilise les trois types de données structurées. Il existe un menu de navigation avec des boutons qui utilisent des pop-ups automatiques pour s'ouvrir et se fermer. La page contient du texte qui utilise des pop-ups d'indices pour afficher des info-bulles contextuelles. Enfin, un toast avec un pop-up manuel indique à l'utilisateur qu'une tâche en arrière-plan est terminée.

Les info-bulles sont éphémères et s'affichent lorsque nous pointons sur le texte avec la souris. Nous ne nous attendons à ce qu'un seul info-bulle soit visible à la fois, et le déclenchement d'un deuxième pop-up d'aide ferme le premier.

Lorsque vous ouvrez le menu en cliquant sur un bouton, le conseil se ferme pour deux raisons. Tout d'abord, le clic en dehors de l'info-bulle déclenche une fermeture légère. Deuxièmement, l'ouverture d'un popover automatique ferme tous les popovers d'indices ouverts. En effet, l'utilisateur a changé de centre d'intérêt, et le contenu éphémère d'un pop-up d'aide n'est plus pertinent. Cela signifie que si vous appelez showPopover() sur un popover automatique, tout popover d'indice ouvert sera fermé.

Les menus déroulants sont des pop-overs automatiques. Avec les menus déroulants, vous vous attendez à ce qu'un seul soit ouvert à la fois, et que l'ouverture de l'un ferme l'autre. Comme vous l'avez vu, l'ouverture d'un popover automatique ferme également tous les popovers d'indices ouverts.

Toutefois, lorsqu'un menu déroulant est ouvert, vous pouvez toujours vouloir afficher le contenu d'un info-bulle non lié. L'affichage d'un info-bulle d'indice ne ferme pas les pop-overs automatiques.

Le pop-over manuel n'est pas affecté par les pop-overs automatiques ou d'indices. Lorsqu'il s'ouvre, il ne ferme aucun pop-over d'indices ni automatique. Toutefois, si vous ouvrez un pop-over manuel en cliquant sur un bouton, cela déclenche une fermeture légère des info-bulles et des pop-overs automatiques.

Les interactions entre les types de pop-up peuvent sembler complexes, mais elles permettent des schémas d'utilisation courants si vous utilisez les types dans les situations appropriées. Si vos pop-ups ne fonctionnent pas comme prévu, vérifiez les types que vous utilisez.

Vérifier que vous avez bien compris