Hover Card
Tarjeta flotante
Una tarjeta flotante es una vista previa detallada. Se abre al pasar el mouse o hacer foco en una referencia, sin bloquear la página.
HoverCardUn ejemplo real
Pasa el cursor sobre el nombre de un autor para ver una breve biografía y el número de seguidores. El perfil completo permanece cerrado.
Partes principales
- 01Activador
- 02Anchored or modal surface
- 03Focus boundary
- 04Dismiss path
Úsalo cuando
Úsalo para detalles opcionales de vista previa que ayudan a las personas a elegir a dónde ir después.
No lo uses cuando
Nunca ocultes información requerida tras un hover, porque los dispositivos táctiles pueden no abrirla de manera fiable.
Nombre usado en código
HoverCard Antes de lanzarlo
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 Tarjeta flotante (Hover Card). User context: Pasa el cursor sobre el nombre de un autor para ver una breve biografía y el número de seguidores. El perfil completo permanece cerrado. Recommended pattern: Tarjeta flotante (Hover Card). Why it fits: Úsalo para detalles opcionales de vista previa que ayudan a las personas a elegir a dónde ir después. Do not use it when: Nunca ocultes información requerida tras un hover, porque los dispositivos táctiles pueden no abrirla de manera 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): Esto no es un estándar normativo. Su nombre, límites y comportamiento esperado pueden cambiar de una fuente a otra. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Tarjeta flotante (Hover Card) is used now. Definition: Una tarjeta flotante es una vista previa detallada. Se abre al pasar el mouse o hacer foco en una referencia, sin bloquear la página. 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.