Consigna y contexto
Necesitas una vista previa de perfil que aparezca al pasar el cursor (hover), recibir foco de teclado o realizar una pulsación larga, y que se oculte cuando termine el interés. Explica cómo usarías interestfor y cómo manejarías la compatibilidad, el foco, los retrasos y el contenido que no debería activarse mediante hover.
El invocador de interés de la Popover API permite que un botón o enlace apunte a un ID de destino en el mismo árbol mediante interestfor. El destino puede ser una tarjeta de vista previa con popover="hint". El navegador la muestra cuando el invocador se vuelve de interés a través de hover, foco o pulsación larga, y la oculta cuando finaliza el interés. Esto resulta adecuado para ayuda breve y no crítica; no debe ser la única forma de descubrir información o una acción.
Qué está evaluando el entrevistador
El entrevistador quiere ver si distingues entre interés y activación, si comprendes el ID de destino, el estado del popover y InterestEvent, y si puedes cubrir teclado, interacción táctil, retrasos, compatibilidad, accesibilidad y los casos en los que un clic explícito o un enlace normal es más seguro.
Preguntas para clarificar
Confirma si la superficie es una sugerencia (hint), una vista previa o un menú con controles; la matriz de compatibilidad de navegadores; los requisitos táctiles; si el contenido es crítico; y si el destino está en el mismo árbol DOM. Aclara también si los usuarios pueden ingresar y permanecer dentro de la superficie, los retrasos para mostrar y ocultar, las reglas de retorno de foco y la experiencia mínima sin JavaScript.
Respuesta de 30 segundos
“Usaría un botón o enlace nativo con interestfor apuntando a un hint de Popover, manteniendo el nombre del perfil y el enlace normal como la ruta principal. El invocador de interés proporciona visibilidad mediante hover, foco y pulsación larga; utilizaría interest-delay, o una estrategia equivalente, para reducir el parpadeo. Detectaría la compatibilidad de características y degradaría hacia listeners de foco y clic. El texto de vista previa debe seguir disponible para usuarios de teclado y pantallas táctiles, y cualquier elemento con efectos secundarios o un modelo de interacción completo debería usar una activación explícita”.
Respuesta detallada
Paso 1: Crear la relación de interés
El valor de interestfor apunta al ID del elemento de destino, y tanto el destino como el invocador deben estar en el mismo árbol. Un ejemplo mínimo es:
<button interestfor="profile-preview" aria-label="Read Ada's profile">
Ada Lovelace
</button>
<article id="profile-preview" popover="hint">
Early computing pioneer; the profile page contains the full biography.
</article>El botón sigue siendo un control nativo enfocable; la vista previa es complementaria y no es la única vía para acceder al perfil.
Paso 2: Separar el interés de la activación
El interés es una retroalimentación transitoria para vistas previas, explicaciones y contexto adicional. Un clic o la tecla Enter representan una activación para navegación, envío o una acción irreversible. No ocultes controles de eliminación, compra o confirmación dentro de una superficie que solo aparece mediante interés.
Paso 3: Respetar los límites del Popover
El navegador gestiona el estado de visualización de un destino popover="hint". Evita que otro script fuerce el mismo estado, ya que dos controladores pueden entrar en condiciones de carrera. Si la superficie necesita un modelo de teclado tipo menú, captura de foco (focus trapping) o un estado complejo, evalúa un patrón de menú explícito, diálogo o componente dedicado.
Paso 4: Controlar el retraso y el parpadeo
El puntero puede cruzar rápidamente el límite entre el invocador y la vista previa. Utiliza interest-delay para los tiempos de aparición y ocultación, y diseña un área de interacción continua entre el disparador y el destino. Calibra los retrasos con pruebas de puntero, teclado y pantalla táctil en lugar de asumir que un único valor funciona para todos los dispositivos.
Paso 5: Cubrir las rutas de teclado y lectores de pantalla
El botón o enlace nativo puede recibir foco. La vista previa debe tener una relación de nombre clara sin robar el foco de manera inesperada. Mantén el texto de la vista previa disponible a través de un nombre visible, destino u otro contenido estático; no reemplaces la indicación de foco con hover ni coloques un error importante únicamente en la vista previa.
Paso 6: Considerar pantallas táctiles y pulsación larga
Las pantallas táctiles no tienen el hover tradicional. El interés por pulsación larga puede proporcionar una vista previa, pero no debe bloquear el toque normal ni el desplazamiento (scrolling). Mantén una ruta de toque directo para acciones importantes y realiza pruebas en pantallas pequeñas para evitar oclusiones, desbordamiento del viewport y verificar el comportamiento de cierre.
Paso 7: Detección de características y degradación progresiva
No asumas que todos los entornos de ejecución son compatibles con interestfor. Detecta la compatibilidad de HTMLButtonElement.prototype.interestForElement; si no está disponible, conserva el contenido HTML y enlaces ordinarios, y luego añade una vista previa básica con listeners de foco, puntero o clic. La solución alternativa debe sumar capacidades sin renderizar una segunda fuente de la verdad.
Paso 8: Probar el ciclo de vida y los límites
Prueba los eventos de entrada y salida del puntero, el movimiento del invocador a la vista previa, Tab y Shift+Tab, pulsación larga, desplazamiento, Escape, reingreso rápido y la eliminación dinámica del destino. Verifica el árbol de accesibilidad, los límites, el retraso, el contenido sin JavaScript y la matriz de navegadores objetivo; una etiqueta de disponibilidad en MDN no sustituye las pruebas directas del proyecto.
Respuesta modelo
Haría que el avatar sea un enlace o botón nativo y apuntaría interestfor a una vista previa popover="hint" en el mismo árbol. La vista previa aporta contexto, mientras que el nombre y el enlace del perfil permanecen visibles en el contenido estático. El interés cubre puntero, foco y pulsación larga; interest-delay y un área de interacción continua reducen el parpadeo. Antes de la implementación, detectaría interestForElement; los navegadores no compatibles conservan el contenido normal y reciben el mismo comportamiento de foco, puntero o clic mediante una solución alternativa. El contenido de eliminación, compra, menú u otros elementos con efectos secundarios deben usar una activación explícita en lugar de una superficie basada solo en interés. Verificaría teclado, interacción táctil, lectores de pantalla, desplazamiento, Escape, eliminación dinámica y la matriz de navegadores de destino.
Errores comunes
Tratar interestfor como un atributo genérico para tooltips
Establece una relación de invocador de interés y depende del comportamiento del navegador vinculado a Popover. Un destino que requiera un modelo de menú o un estado complejo necesita la semántica de componente correspondiente.
Implementar únicamente CSS para hover
Los usuarios de teclado no cuentan con hover de puntero, y las pantallas táctiles tienen un modelo de gestos diferente. Mantén el comportamiento de foco, una ruta de toque directo e información estática.
Hacer que la vista previa sea la única fuente de contenido crítico
Los usuarios pueden utilizar un navegador incompatible, tener los scripts deshabilitados o no poder realizar una pulsación larga. Los nombres críticos, estados y acciones deben permanecer en el contenido principal o en una ruta de activación explícita.
Preguntas de seguimiento y respuestas
¿Qué pasa si el navegador no admite interestfor?
Primero mantén completos el HTML ordinario, los enlaces y los estilos de foco; luego realiza la detección de características. La solución alternativa añade el comportamiento de vista previa sin alterar la navegación ni la estructura de información, y se prueba contra la matriz de soporte.
¿Cómo evitas el parpadeo entre el invocador y la vista previa?
Utiliza un área de interacción continua, retrasos para mostrar y ocultar, y preserva el interés al ingresar al elemento de destino. No permitas que múltiples scripts controlen el estado del Popover; registra el orden de entrada, salida y eliminación al diagnosticar condiciones de carrera.
¿Debería el foco moverse a la vista previa cuando el invocador recibe foco?
Para una vista previa pura, normalmente no: mantén el foco en el invocador y expón un nombre accesible claro. Si la superficie contiene controles, cambia a un menú o diálogo activado explícitamente con comportamientos definidos de entrada, Escape y retorno.
¿Cómo manejas la pulsación larga frente al toque simple?
La vista previa por pulsación larga no debe bloquear la navegación por toque ni el desplazamiento. Mantén un objetivo táctil para acciones importantes y prueba la pulsación larga, el toque corto, el desplazamiento y los bordes del viewport en dispositivos reales.
¿Qué valor debería usar interest-delay?
No existe un valor universal válido para todos los dispositivos. Mide los casos de entrada, salida y movimiento rápido frente a la densidad de contenido y el costo de activaciones accidentales. Proporciona retroalimentación de foco inmediata para que los usuarios de teclado no tengan que esperar un retraso diseñado para punteros.
¿Cuándo deberías evitar los invocadores de interés?
Evítalos cuando el contenido sea crítico, las acciones tengan efectos secundarios, la gestión del foco sea compleja, la coordinación cruce distintos árboles o sea obligatorio el soporte para navegadores antiguos. Los invocadores de interés son ideales para vistas previas complementarias, transitorias y de bajo riesgo.