En las páginas de listado de preguntas de mi producto, Front Prep, muestro logotipos de empresas junto a las preguntas de entrevista. Al pasar el cursor sobre un logotipo, un tooltip muestra el nombre de la empresa. Había configurado el retardo del tooltip a 0, por lo que los tooltips aparecían instantáneamente al mover el cursor por la página.
Para solucionarlo, añadí un retardo de transición de 200ms, pero esto creó un nuevo problema: moverse entre múltiples logotipos significaba esperar el mismo retardo de 200ms cada vez, lo que resultaba lento. Este artículo trata sobre un pequeño patrón de interacción que se encuentra en las barras de herramientas de los navegadores y en los sitios web. Mi solución se divide en tres partes: al pasar el cursor sobre un logotipo, el tooltip espera 200ms antes de abrirse.
Cuando un tooltip se cierra, comienza un temporizador de 300ms, que llamo la ventana cálida. Si pasas el cursor sobre otro logotipo mientras este temporizador está en marcha, el tooltip se abre instantáneamente, omitiendo el retardo. Cuando el temporizador expira, la página se enfría y el retardo de 200ms vuelve.
En Front Prep, mis tooltips están construidos con Radix y Motion. El código utiliza una variable de contexto para rastrear el estado isWarm entre componentes. Al pasar el cursor, el componente comprueba si la página está cálida; si es así, el tooltip se abre instantáneamente; de lo contrario, inicia un temporizador de 200ms.
La función show copia el estado cálido en un indicador instantáneo, que CSS utiliza para omitir la animación de entrada mediante un atributo de datos. Este patrón mejora la experiencia del usuario al evitar tanto los popups instantáneos como los retrasos lentos. Es un enfoque simple que puedes implementar en tu propio código.
Entidades clave: Empresas: Front Prep.
Fuente: Hacker News · Resumido por HeadlinesBriefing