Los tooltips necesitan un retraso, y luego deben omitirlo
Tooltips need a delay, and then they need to skip it
En las páginas de listado de preguntas de FrontPrep, los tooltips aparecían instantáneamente al pasar el cursor sobre los logos de las empresas, lo que resultaba molesto. Al añadir un retraso de 200 ms, el movimiento entre logos adyacentes se volvió lento. La solución: un retraso de 200 ms para abrir, pero si el usuario pasa a otro logo dentro de una ventana de 300 ms (página 'caliente'), el tooltip se abre al instante. Este patrón, común en barras de herramientas y sitios web, mejora la experiencia de usuario. El artículo explica la implementación con React y Radix, y ofrece un skill de Claude para auditar tu código.
Un clic siempre es intencional, mientras que un hover no lo es.
- ProxCoques
Nunca dejará de sorprenderme que Apple (bajo Jef Raskin, quien también escribió sobre esto en The Humane Interface) observara y corrigiera problemas con interacciones como esta en SYSTEM 6, en 1993 o así, solo para que décadas después el mismo problema tenga que ser redescubierto y vuelto a corregir.
- brixie
Esto parece describir la misma técnica que el último ejemplo en https://emilkowal.ski/ui/you-dont-need-animations (y creo que todo ese artículo vale la pena leerlo, si te resultó interesante esto). Es un detalle tan pequeño que de otra manera no lo habría notado (porque no hago animaciones, así que no se me cruza por la mente), pero ahora que lo conozco, pienso en ello todo el tiempo.
- hurrell
Creo que yo lo describiría como un ejemplo de histéresis. ¡Genial!
- kazinator
Básicamente, ten una temperatura global. Cuando el puntero está en algo que tiene un tooltip, la temperatura sube. De lo contrario, se enfría (posiblemente a un ritmo diferente). Un tooltip solo se muestra cuando el puntero está dentro de los límites y la temperatura está por encima de cierto umbral.
- compiler-guy
Aprecio enormemente esta atención al detalle, y no hay suficiente de esto en el mundo. Por ejemplo, en Visual Studio las ventanas emergentes al pasar el ratón aparecen tan rápido que apenas puedes seleccionar algo, o terminas haciendo clic en la ventana emergente en lugar de seleccionar una palabra.