Cette page a été traduite par l'API Cloud Translation.

Pop-over = hint

Keith Cirkel

Mason Freed

Publié le 26 février 2025

Chrome 133 s'appuie sur la fonctionnalité de pop-up existante en introduisant un nouveau mode :popover="hint". Ce mode géré par le navigateur permet d'utiliser un nouveau contexte d'empilement qui simplifie la création d'info-bulles et d'éléments flottants éphémères similaires. Il réduit les efforts des développeurs tout en conservant la flexibilité de la conception.

Introduction et historique

L'API Popover, introduite dans Chrome 114, vous permet de créer une UI flottante accessible, comme des menus et des info-bulles. Par défaut, popover="auto" gère la fonctionnalité de fermeture de la fenêtre pop-up et la gestion du focus pour vous, sans nécessiter de script supplémentaire, comme indiqué dans la section Présentation de l'API Popover. Lorsque vous ouvrez un popover popover="auto", tous les autres popovers sans ancêtre avec popover="auto" sont fermés, ce qui permet d'obtenir une API ergonomique qui effectue la chose la plus logique.

Pop-ups fermant d'autres pop-ups

<div id="p1" popover>First Popover</div>
<button popovertarget="p1">Open popover 1</button>
<div id="p2" popover>Second Popover</div>
<button popovertarget="p2">Open popover 2</button>

Dans cet exemple, l'ouverture du popover 2 ferme le popover 1, car popover="auto" n'autorise qu'un seul popover de ce type à la fois.

Bien que ce comportement fonctionne bien pour les menus et les boîtes de dialogue, il peut créer des problèmes lorsque plusieurs types d'UI flottante doivent coexister. Par exemple, un menu et une info-bulle utilisant tous deux popover="auto" peuvent entrer en conflit, ce qui fait que l'ouverture de l'info-bulle ferme le menu. Cette situation peut sembler inhabituelle, mais elle se produit souvent dans une UI de style application moderne. Par exemple, les menus de l'en-tête de github.com utilisent des popovers à la fois pour les menus et les info-bulles, ce qui permet à ces deux éléments d'être visibles en même temps sous certaines conditions:

Pour résoudre ce problème, vous pouvez utiliser popover="manual" pour les éléments d'info-bulle, ce qui permet de contrôler entièrement le popover avec du script. Toutefois, cela nécessite de réimplémenter le comportement d'empilement, la fermeture par appui léger et la gestion du focus, qui sont précisément les tâches que l'API Popover a été conçue pour gérer. Nous avons donc décidé d'étudier des moyens d'étendre l'API pour fournir cette fonctionnalité manquante.

Grâce à des recherches auprès de développeurs, nous avons identifié deux contextes de superposition courants:

UI persistante: par exemple, les menus et les boîtes de dialogue.
UI éphémère: par exemple, les cartes flottantes et les info-bulles.

Pour les deux, popover="hint" introduit une deuxième pile, distincte de popover="auto", qui garantit que les menus restent ouverts même lorsque les info-bulles s'affichent. Plutôt que d'introduire plusieurs contextes d'empilement pour différents types d'UI (ce qui reviendrait essentiellement à réinventer z-index), cette approche simplifie les choses en ne définissant que deux grandes catégories: l'UI persistante (auto) et l'UI éphémère (hint). Cela permet de trouver un équilibre entre la flexibilité et l'évitement de la réapparition des mêmes problèmes que vous rencontriez avant d'utiliser le popover.

Comportement de la nouvelle valeur

popover="auto" et popover="hint" sont compatibles avec la fermeture légère, ce qui signifie qu'ils se ferment automatiquement lorsque l'utilisateur clique en dehors d'eux ou appuie sur la touche Esc du clavier. À cet égard, les deux styles sont identiques.

En ce qui concerne le masquage forcé d'autres popovers, popover="auto" ferme tous les autres popovers auto et hint lorsqu'il est ouvert, ce qui garantit qu'un seul popover de ce type est actif à la fois (la seule exception ici concerne les popovers imbriqués, expliqués ci-dessous). popover="hint", en revanche, ne force que le masquage des autres popovers hint, ce qui permet aux menus et aux info-bulles de rester ouverts et de coexister.

La principale différence réside dans leur comportement d'imbrication. popover="auto" est compatible avec l'imbrication, ce qui permet à un popover enfant de rester ouvert dans un autre popover parent. popover="hint" présente un comportement d'imbrication spécial, qui est l'endroit où les "piles" distinctes entrent en jeu. Lorsqu'un pop-up hint se trouve dans un pop-up auto, il rejoint la pile auto pour maintenir le regroupement contextuel. Autrement dit, il restera ouvert jusqu'à ce que d'autres pop-ups auto ou hint le cachent de force. Cela offre un comportement intuitif, où les info-bulles n'interrompent pas les autres menus ni les pop-ups.

Enfin, pour des cas d'utilisation très différents, il existe toujours popover="manual", qui n'est associé à aucun de ces comportements intégrés, ce qui vous permet de définir précisément les fonctionnalités et le comportement dont vous avez besoin.

	`popover="auto"`	`popover="hint"`	`popover="manual"`
Ignorer la lumière	Oui	Oui	Non
Masque les éléments suivants:	`auto` et `hint` sans rapport	`hint` sans rapport	Nothing
Imbrication:	Oui	Spécial (décrit précédemment)	N/A : aucune annulation de la lumière

Déclenchement par survol

Un modèle d'UX courant consiste à activer les info-bulles et les cartes flottantes lorsque l'utilisateur pointe sur l'élément. Lorsque vous pointez la souris sur un élément d'intérêt pendant un certain temps, la fiche informative s'affiche. Actuellement, ce comportement doit être implémenté via JavaScript, par exemple en ajoutant des écouteurs pour les événements mouseenter et mouseleave. Cependant, une autre API est en cours de développement qui devrait rendre le déclenchement du survol déclaratif: l'API Interest Invokers.

Cette API est encore en cours de développement, mais l'idée générale est d'ajouter un attribut appelé interesttarget à de nombreux types d'éléments, ce qui leur confère un comportement de déclenchement par survol:

<a interesttarget="my-hovercard" href="...">
  Hover to show the hovercard
</a>
<span popover="hint" id="my-hovercard">
  This is the hovercard
</span>

Avec le code HTML précédent, le pop-up my-hovercard s'affiche automatiquement lorsque vous pointez sur le lien <a>. Si vous déplacez le pointeur hors de cet élément, le pop-up disparaît. Le tout sans JavaScript !

Exemples

<button>An interesting button</button>
<div popover="hint">More info about the button</div>

[popover] {
  margin: 0;
  inset: auto;
  position-area: bottom right;
}

const button = document.querySelector('button');
const popover = document.querySelector('[popover]');

button.onmouseenter = () => {
  setTimeout(() => {
    popover.showPopover({source: button});
  }, 500);
}

button.onmouseleave = () => {
  setTimeout(() => {
    popover.hidePopover();
  }, 500);
}

Bouton avec info-bulle. — Essayez-le en direct.

Cet exemple utilise popover="hint" pour créer une info-bulle de base, qui fournit plus d'informations sur le bouton lorsque vous pointez dessus avec la souris. L'activation du survol est fournie par les gestionnaires d'événements pour mouseenter et mouseleave avec des délais simples de 0,5 seconde. Notez que certains détails ne sont pas gérés par cet exemple:

Le fait de pointer sur le popover lui-même n'empêche pas la fermeture du popover si vous pointez ailleurs qu'un élément déclencheur. Il n'est donc pas possible de copier ni de coller du texte à partir du pop-up, par exemple.
Il n'y a pas de "débouncing": il suffit de pointer sur le bouton pendant une petite fraction de seconde pour déclencher le popover, même si le pointeur est rapidement retiré du bouton avant l'expiration du délai. Dans ce cas, l'info-bulle "clignote" et s'ouvre et se ferme rapidement.
L'exemple n'est pas du tout accessible: tout utilisateur qui n'utilise pas de souris ne peut pas accéder au contenu de l'info-bulle.

Ces lacunes peuvent être corrigées avec du code JavaScript supplémentaire. Par exemple, focus (ou peut-être les gestionnaires d'événements keydown et keyup)) doivent être ajoutés pour permettre l'activation du popover à l'aide du clavier. Pour en savoir plus sur les éléments à gérer correctement pour vous assurer que l'info-bulle est accessible, consultez cet excellent article de blog de Sarah Higley. Tous ces problèmes (et plus encore) seront automatiquement gérés de manière déclarative par l'API Interest Invokers.

En savoir plus

Pour en savoir plus, consultez la présentation de la fonctionnalité ou la spécification HTML.