Consigna y contexto
El producto requiere una vista previa ligera cuando un usuario muestra interés en un nombre de usuario, enlace de documento o término, pero el contenido debe seguir siendo utilizable cuando el hover desaparece, el usuario navega con el teclado o el dispositivo es solo táctil. Utiliza los interest invokers de HTML y la Popover API, y explica los retardos, el foco, el cierre, los navegadores no compatibles y las cargas de datos fallidas.
MDN describe interestfor como una forma declarativa de asociar un botón o enlace con un elemento de destino; cuando el destino es un popover, el navegador puede mostrarlo automáticamente mientras el interés esté presente. El explicador de Open UI documenta la motivación de las hovercards. Este artículo sintetiza material público y no pretende ser una pregunta de entrevista específica de una empresa.
Qué evalúa el entrevistador
El entrevistador quiere ver si tratas el "hover" como un estado de interés que abarca puntero, foco, tacto y tecnología de asistencia. Una respuesta sólida menciona interest/loseinterest, interest-delay-*, la capa superior (top layer) de popover, la gestión del foco, una ruta principal sin JavaScript y la mejora progresiva; una respuesta débil solo vincula mouseenter/mouseleave.
Preguntas para aclarar primero
- ¿La vista previa es información complementaria o es necesaria para completar la tarea?
- ¿El contenido de destino es del mismo origen, almacenable en caché y puede cargarse de forma diferida?
- ¿Cómo deben abrirlo y cerrarlo los dispositivos táctiles, y un toque debe navegar a la página de detalles?
- ¿Cómo se mantiene utilizable el enlace principal cuando el navegador carece de interest invokers?
Una respuesta de 30 segundos
"Mantendría el enlace normal apuntando a la página de detalles y usaría interestfor para asociarlo con una vista previa de popover. Los retardos de interés reducen la activación accidental; donde es compatible, el comportamiento declarativo cubre puntero y foco. Los navegadores no compatibles no pierden el enlace, y un polyfill mínimo de JavaScript puede añadir la vista previa. Los datos de la vista previa pueden cargarse de forma asíncrona, pero no deben bloquear la navegación. El cierre respeta la semántica de foco y Escape, y la reducción de movimiento elimina la animación".
Solución paso a paso
Estructuralmente, el enlace o botón es el invocador de interés (interest invoker), mientras que el destino tiene un id y un popover estables. El valor de interestfor del invocador hace referencia a ese id. Si el destino es un popover, la plataforma lo coloca en la capa superior (top layer) y aplica el comportamiento del ciclo de vida de popover; el destino también puede ser un elemento ordinario que la aplicación muestra tras escuchar los eventos de interés.
Los retardos evitan que un barrido rápido del puntero a través de los enlaces inicie muchas solicitudes. Utiliza interest-delay-start y interest-delay-end, o una limitación de frecuencia equivalente a nivel de aplicación, muestra primero un skeleton y realiza la búsqueda mediante una clave de caché. Cuando el interés sale del invocador, entra en el popover de destino o se mueve a otro enlace, cancela el trabajo no finalizado y haz que prevalezca la intención más reciente.
El teclado y el tacto no pueden depender del hover. Al enfocar el enlace se debe mostrar la misma vista previa, Escape debe cerrarla y el orden del tabulador aún debe permitir llegar a la página de detalles. En pantallas táctiles, el producto puede mostrar la vista previa en el primer toque y navegar en el segundo, o navegar directamente ofreciendo un control de vista previa separado; elige una regla explícita para evitar conflictos de gestos.
La accesibilidad requiere un nombre de destino legible, relaciones correctas y retroalimentación de estado. Cuando la vista previa es complementaria, no fuerces el foco dentro del popover; si contiene controles interactivos, define una ruta clara de entrada y retorno del foco. Los usuarios de lectores de pantalla deben poder llegar a la página de detalles directamente, incluso cuando falla la carga de la vista previa.
La detección de capacidades y la degradación protegen la ruta principal. Sin interestfor o la Popover API, el enlace navega con normalidad, mientras que la vista previa puede degradarse a un clic para abrir o ser omitida. Un polyfill solo debe añadir comportamiento de visualización, en lugar de reimplementar cada límite de capa superior, foco y seguridad; mide la tasa de compatibilidad, la tasa de apertura de vistas previas, los fallos de carga y la conversión de navegación.
Ejemplo de una respuesta sólida
Haría que el enlace fuera la navegación principal y el interest invoker una capa de vista previa opcional. interestfor hace referencia a un id estable y el destino utiliza popover; la plataforma gestiona el interés por puntero/foco mientras que los retardos y el almacenamiento en caché controlan las solicitudes. El foco por teclado funciona, Escape cierra y el tacto sigue una regla de toque explícita. Los navegadores no compatibles conservan el enlace normal, y un fallo en la vista previa afecta solo a la capa complementaria, no al acceso a la página de detalles.
Errores comunes
- Síntoma → Escuchar únicamente mouseenter; por qué falla → El teclado, el tacto y la tecnología de asistencia no pueden activarlo; solución → Centrar el interés y el foco, manteniendo al mismo tiempo la navegación.
- Síntoma → Mover el foco a la vista previa en cuanto aparece; por qué falla → Interrumpe a quien está leyendo el enlace; solución → Mover el foco solo cuando los controles interactivos y una regla explícita lo requieran.
- Síntoma → Realizar una petición en cada hover; por qué falla → Los barridos rápidos generan una tormenta de solicitudes; solución → Utilizar retardos, cancelación, almacenamiento en caché y manejo de prioridad para la intención más reciente.
- Síntoma → Bloquear el enlace cuando no hay compatibilidad; por qué falla → Una API experimental se convierte en una dependencia para el contenido principal; solución → Mantener el enlace ordinario como una alternativa incondicional.
Preguntas de seguimiento y respuestas
¿Por qué el destino de la vista previa no siempre necesita popover?
interestfor puede asociar un invocador con un destino ordinario, tras lo cual el código de la aplicación escucha los eventos de interés y controla la visualización. Un popover otorga a la plataforma la semántica de capa superior y cierre. Elige en función de si el comportamiento del ciclo de vida nativo y el control declarativo ligero resultan útiles.
¿Cómo evitas que la vista previa cubra otro enlace?
Asigna al destino reglas de posicionamiento y colisión estables, usa un retardo de finalización al salir y considera la entrada en el popover como interés continuado. Durante un cambio rápido, cancela la solicitud anterior, cierra el destino antiguo y confirma únicamente el resultado del invocador más reciente.
¿Qué debería suceder cuando falla la carga de la vista previa?
Muestra un estado breve con opción de reintento dentro de la vista previa y proporciona un enlace directo a los detalles; mantén el error fuera del contenido principal de la página. Registra el motivo del fallo y la latencia, y omite la animación de la vista previa o navega directamente cuando se exceda el tiempo límite establecido.