Implémenter des fonctionnalités de popover avec l’API Popover

Résumé des points clés de l’API Popover

Présentation de l’API Popover

• L’API Popover fournit aux développeurs un mécanisme standard, cohérent et flexible pour afficher du contenu de type popover au-dessus du contenu d’une page
• Le contenu popover peut être contrôlé de manière déclarative à l’aide d’attributs HTML, ou via JavaScript

Caractéristiques et utilisation des popovers

• Les popovers se divisent en deux modes : modal et non modal, et les popovers créés avec l’API Popover sont toujours non modaux
  • Modal signifie que le reste de la page est rendu non interactif pendant que le popover est affiché
  • Non modal signifie qu’il est possible d’interagir avec le reste de la page pendant que le popover est affiché
• Les cas d’usage courants des popovers incluent les menus d’action, les notifications "toast" personnalisées, les suggestions d’éléments de formulaire, les sélecteurs de contenu ou les interfaces pédagogiques
• Les popovers peuvent être créés de manière déclarative via des attributs HTML ou via l’API JavaScript

Attributs HTML liés à l’API Popover

• popover : attribut global qui transforme un élément en élément popover
• popovertarget : transforme un élément <button> ou <input> en bouton de contrôle d’un popover
• popovertargetaction : spécifie l’action à effectuer sur l’élément popover contrôlé par le <button> ou <input> de contrôle

Fonctionnalités CSS liées à l’API Popover

• ::backdrop : élément plein écran placé juste derrière l’élément popover, qui peut au besoin ajouter des effets au contenu de la page situé derrière le popover
• :popover-open : pseudo-classe qui ne correspond que lorsque l’élément popover est affiché, et qui peut être utilisée pour définir son style à l’état visible

Interfaces et extensions liées à l’API Popover

• ToggleEvent : représente un événement qui informe l’utilisateur lorsque l’état d’un élément popover bascule entre affiché et masqué
• Des propriétés d’instance telles que HTMLElement.popover, HTMLButtonElement.popoverTargetElement, HTMLInputElement.popoverTargetElement, HTMLButtonElement.popoverTargetAction, HTMLInputElement.popoverTargetAction ont été ajoutées
• Des méthodes d’instance telles que HTMLElement.hidePopover(), HTMLElement.showPopover(), HTMLElement.togglePopover() ont été ajoutées
• Les événements beforetoggle et toggle ont été ajoutés

Avis de GN⁺

• L’API Popover est intéressante dans la mesure où elle fournit aux développeurs web une méthode standardisée pour implémenter facilement une interface de popover. Jusqu’à présent, il fallait généralement utiliser une bibliothèque ou l’implémenter soi-même
• Il faut toutefois tenir compte du fait que l’API Popover reste une fonctionnalité expérimentale et que la prise en charge par les navigateurs est encore limitée. Pour une utilisation en production, il peut être pertinent d’envisager un polyfill ou un usage parallèle avec des bibliothèques existantes
• Parmi les bibliothèques offrant des fonctionnalités similaires, on peut citer le composant Popover de Bootstrap ou encore Tippy.js
• Lors de l’utilisation de l’API Popover, il faut également prendre en compte l’accessibilité. Le popover doit pouvoir être contrôlé au clavier, et un texte alternatif doit aussi être fourni pour les utilisateurs de lecteurs d’écran

[GN⁺]

Avis Hacker News

En résumé, voici les points évoqués.

• Une fois CSS Anchor Positioning introduit, il pourra être combiné à la Popover API pour implémenter de manière déclarative des info-bulles personnalisées ou des menus contextuels, ce qui rendrait des bibliothèques comme PopperJS inutiles.
• Si l’on veut une boîte de dialogue modale, il est aussi possible d’utiliser l’élément <dialog>.
• À l’heure actuelle, les popovers présentent des limites d’implémentation, notamment parce qu’ils ne peuvent pas dépasser les bords de la fenêtre du navigateur et s’intègrent mal au système de fenêtrage de l’OS hôte. Pour faire cela correctement, il faudrait probablement une fenêtre HWND distincte pour chaque popover sous Win32, et une NSView sous macOS.
• Il est assez ironique de créer ce type d’API alors que les navigateurs ont déjà des bloqueurs de pop-up. Cela rappelle la guerre des publicités pop-up/pop-under de la fin des années 1990 et du début des années 2000.
• La Popover API facilitera probablement le ciblage et le blocage via des extensions. Elle risque surtout d’être utilisée pour des usages que les utilisateurs détestent, comme les CTA marketing ou les fenêtres de chat d’assistance intrusives.
• On dit d’utiliser l’élément <dialog> si l’on veut rendre un popover modal, mais dans des cas comme l’ajout d’un flou d’arrière-plan, transformer le popover en modal correspond bien au bon use case. Est-ce que <popover modal=true> ne serait pas une meilleure approche ?
• Un exemple de code d’implémentation personnalisée avec Stimulus + Popper a été partagé.
• Quelqu’un a fait remarquer qu’il n’y avait pas d’image sur la page pour montrer ce qu’est un popover.
• Réactions admiratives face à l’arrivée de la Popover API.