Hover Card
Carte de survol
Une hover card est un aperçu riche. Elle s'ouvre quand on survole ou qu'on sélectionne une référence, sans bloquer la page.
HoverCardUn vrai exemple
Survolez le nom d'un auteur pour voir une courte biographie et le nombre d'abonnés. Le profil complet reste fermé.
Parties principales
- 01Déclencheur
- 02Anchored or modal surface
- 03Focus boundary
- 04Dismiss path
Utilisez-le lorsque
Utilisez-le pour des détails d'aperçu optionnels qui aident les gens à choisir où aller ensuite.
Ne l'utilisez pas lorsque
Ne cachez jamais les informations requises derrière un survol, car les appareils tactiles peuvent ne pas les afficher de manière fiable.
Nom utilisé dans le code
HoverCard Avant d'expédier
Move focus on purpose. Keep it inside only when the overlay blocks the page. Support Escape and a visible close button, then return focus to the opener. Keep entered data and check small-screen, loading, and failure states.
Outcome: Complete the task with Carte de survol (Hover Card). User context: Survolez le nom d'un auteur pour voir une courte biographie et le nombre d'abonnés. Le profil complet reste fermé. Recommended pattern: Carte de survol (Hover Card). Why it fits: Utilisez-le pour des détails d'aperçu optionnels qui aident les gens à choisir où aller ensuite. Do not use it when: Ne cachez jamais les informations requises derrière un survol, car les appareils tactiles peuvent ne pas les afficher de manière fiable. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Ce n'est pas une norme normative. Son nom, ses limites et son comportement attendu peuvent varier d'une source à l'autre. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Vérifiez cette demande
Review how Carte de survol (Hover Card) is used now. Definition: Une hover card est un aperçu riche. Elle s'ouvre quand on survole ou qu'on sélectionne une référence, sans bloquer la page. Release checks: Move focus on purpose. Keep it inside only when the overlay blocks the page. Support Escape and a visible close button, then return focus to the opener. Keep entered data and check small-screen, loading, and failure states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.