En las páginas de listado de preguntas de entrevista de su producto FrontPrep, el autor muestra logotipos de empresas junto a cada pregunta y, al pasar el cursor sobre ellos, aparece un tooltip con el nombre de la compañía. El problema que detectó es que los tooltips se abrían de inmediato al rozar los logotipos, ya que el retardo estaba fijado en 0 milisegundos, lo que generaba una experiencia ruidosa.
Para solucionarlo, añadió un retardo de 200 milisegundos antes de abrir el tooltip, pero comprobó que esto volvía perezosa la interacción cuando varias empresas comparten la misma pregunta: había que esperar 200 ms cada vez que el cursor pasaba de un logotipo a otro contiguo.
El patrón que propone combina tres elementos: al entrar sobre un logotipo, si la página está caliente el tooltip se muestra al instante; si está fría, espera 200 ms. Al salir, el tooltip se cierra y se inicia una ventana caliente de 300 ms. Durante ese periodo, cualquier otro logotipo que se sobrevuele abrirá su tooltip sin retardo ni animación. Transcurridos los 300 ms, la página vuelve a estar fría y el siguiente tooltip deberá esperar de nuevo sus 200 ms.
El artículo detalla la implementación en React usando useContext, useRef y useMemo para compartir un estado común (openDelay, isWarm, markOpened, markClosed) entre todos los tooltips. La función show copia isWarm a una variable instant, que se aplica como atributo data-instant en el tooltip para que CSS omita la animación de entrada cuando el dato es verdadero. En la salida, clearTimeout cancela aperturas pendientes cuando el cursor cruza el logotipo en menos de 200 ms, evitando así tooltips fugaces.
El autor justifica los 200 ms como equilibrio entre los 150 ms en los que el cursor ya abrió un tooltip y los 250 ms en los que el retardo se nota lento, y anuncia una skill de Claude para auditar bases de código con este mismo patrón. Termina reflexionando sobre el valor del criterio humano: la IA puede generar tooltips funcionales, pero la diferencia entre un tooltip que simplemente funciona y uno cuidado reside en decisiones de gusto que solo aporta la experiencia.