Un popover est un petit panneau qui s’ouvre à côté d’un bouton, pour du contenu interactif : des filtres, un court formulaire, un sélecteur de couleur. C’est un popover="auto" natif : le navigateur le ferme avec Échap ou un clic à l’extérieur, rend le focus et le place juste après son déclencheur dans l’ordre de tabulation.

Une hovercard est une infobulle riche. Elle s’ouvre après un court survol, ou immédiatement au focus clavier, et décrit son déclencheur. Elle reste ouverte quand le pointeur passe dessus, pour que son texte puisse être lu et sélectionné.

Les deux basculent de l’autre côté quand la place manque, restent à l’écran et suivent leur déclencheur quand la page défile.

Filtres

Un popover contenant un formulaire. arrow le fait pointer vers son déclencheur, et hide() le ferme depuis le code.

Showing open, in review issues.

Hovercard

Survolez un nom, ou atteignez-le avec Tab. La carte décrit le lien : les lecteurs d’écran la lisent après le nom.

Reviewed by @ada and @grace.

Côtés et animations d’entrée

side et align définissent où il s’ouvre ; start et end suivent le sens d’écriture. enter et motion définissent son entrée en scène.