Groupe de concepts
Petites surfaces contextuelles
Comparer une aide passive, un contenu interactif complémentaire et un menu d'actions compact autour d'un même déclencheur.
Essaie les 3 concepts, compare ce qui change, puis utilise le Pack adapté à ton besoin.
Essayer les composantsPetites surfaces contextuelles
Essayer
As-tu besoin d’une explication brève, d’un contenu contextuel interactif ou d’une liste d’actions ?
Infobulle
Contexte commun aux essais
Un espace projet doit révéler une aide brève, des détails complémentaires ou une courte liste d'actions depuis un contrôle compact sans quitter la tâche en cours.
Infobulle
Mission
Info-bulle - Tooltip
Révéler le nom de l'icône au pointeur et au clavier, puis fermer avec Échap.
Exporter le rapport
report-july.pdf
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- L'aide apparaît près du bouton d'export focalisé, qui reste utilisable.
- Cas limite
- Sur écran tactile, l'icône garde un moyen visible d'obtenir son nom et aucune information ne dépend uniquement du survol.
Fenêtre contextuelle
Mission
Fenêtre contextuelle - Popover
Ouvrir l'explication, parcourir son ordre de focus, puis la fermer sans perdre sa position.
Détail de la facture
Une ligne de service et les frais associés.
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- Le panneau non modal s'ouvre près du libellé de facturation et son lien peut recevoir le focus.
- Cas limite
- Quand l'espace manque, la gestion des collisions repositionne le panneau sans couvrir le déclencheur ni déplacer le focus de façon inattendue.
Ce que cet essai montre
Choisir Infobulle seulement pour un contenu bref sans élément interactif ; utiliser Popover pour des contrôles ou un contenu plus riche.
Lequel convient à ton besoin ?
Infobulle
Expliquer une icône peu familière
Fenêtre contextuelle
Afficher une explication compacte avec un lien
Différence et sources
Choisir Infobulle seulement pour un contenu bref sans élément interactif ; utiliser Popover pour des contrôles ou un contenu plus riche.
Consulter les sourcesParties du spécimen
Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.
Déclencheur
Le contrôle qui ouvre ou révèle la surface.
Les trois concepts
Les trois comparaisons
Signaux que tu les confonds
Ces descriptions correspondent à tous les concepts du groupe : aucune ne suffit à décider.
- une petite surface ancrée près d'un déclencheur compact
- une aide, des détails ou des actions apparaissent près du contrôle