El caso es de un panel interno de una empresa pequeña. En una tabla de usuarios, cada fila tiene un icono de información; al pasar el ratón sale un tooltip con el detalle de la cuenta y, al final, un enlace: «ver historial completo». Lo clásico.
El tooltip funcionaba. El enlace no se podía pulsar. Movías el ratón del icono hacia el tooltip y, antes de llegar, el tooltip se cerraba. Si lo intentabas muy rápido, a veces entrabas. Soporte lo reportó como «el enlace del tooltip va a veces».
El bug no está en el tooltip, está en el hueco
El componente hacía lo evidente: mouseenter en el icono abre, mouseleave en el icono cierra. Y el tooltip se dibujaba con unos pocos píxeles de separación respecto al icono, por estética. Ese hueco era el problema: al cruzarlo, el ratón ya no estaba sobre el icono y todavía no estaba sobre el tooltip, así que el mouseleave disparaba y el tooltip moría a medio camino.
Los tres días de ideas malas fueron, por orden: subir el tooltip hasta pegarlo al icono (feo y frágil, porque el tooltip se coloca arriba o abajo según el espacio disponible); meter un setTimeout de cierre de medio segundo (mejora la sensación, pero deja tooltips zombis cuando recorres la tabla rápido); y envolver icono y tooltip en un contenedor común con los handlers arriba, que es lo correcto hasta que el tooltip se renderiza en un portal fuera del DOM del contenedor, que era el caso.
Dónde ayudó la IA local
Lo útil no fue pedirle «hazme un tooltip». Fue pegarle el componente de verdad —con su portal, su cálculo de posición y su hueco de ocho píxeles— y describirle el síntoma. La conversación derivó en lo que había que derivar: el cierre no debe depender de salir del icono, sino de que el puntero no esté ni en el icono ni en el tooltip, con un pequeño retardo que se cancela si entras en cualquiera de los dos. Dos handlers compartiendo un temporizador, y un detalle que yo no tenía en la cabeza: hacerlo también accesible por teclado con focusin y focusout, porque si el enlace está ahí es que alguien tiene que poder llegar tabulando.
De paso, ejemplos de prueba: puntero que sale del icono y vuelve, puntero que entra al tooltip y sale por el otro lado, y recorrer tres filas seguidas para cazar los tooltips zombis.
Por qué importa que esto no salga de tu máquina
Ese componente lleva dentro los nombres de las columnas, el patrón de la URL del historial y el aspecto de un panel que la empresa no ha publicado. No es un secreto de estado, pero tampoco es tuyo para subirlo a un servicio de terceros. Y el mejor contexto que le puedes dar a una IA es precisamente el código real, no una versión aguada con nombres cambiados.
Si corre en tu navegador, sobre tu GPU, puedes pegarle el componente entero y dejar de decidir qué te atreves a enseñar.
Abre Elffuss Code y pégale el componente que te está dando guerra: la IA corre dentro de tu navegador, así que ni el código ni el prompt salen de tu equipo.
Abrir Code →