Tooltips need a delay, and then they need to skip it
blog.master.dev
Tooltips need a delay, and then they need to skip it
1–10 of 92 posts
Re: Tooltips need a delay, and then they need to skip it
#2I ran into the same problem about 20 years ago when implementing hover-based dropdown menus on a website. It was only about 10 lines of JS and a couple global variables but I was the only person who understood it. :-P
(These days I would have included more comments.)
Naturally, there was a fallback to pure CSS menus, because we weren't barbarians.
Re: Tooltips need a delay, and then they need to skip it
#3I greatly appreciate this attention to detail, and there isn't enough of this in the world. For example, in Visual Studio popups on hover happen so fast you can barely select anything, or you end up clicking on the popup instead of selecting a word.
Re: Tooltips need a delay, and then they need to skip it
#4The pure CSS version seems more interesting to me: https://blog.master.dev/delayed-then-instant-tooltips-with-h...
Re: Tooltips need a delay, and then they need to skip it
#5Chris Coyier also posted a version using only HTML/CSS, no JS: https://blog.master.dev/delayed-then-instant-tooltips-with-h...
Re: Tooltips need a delay, and then they need to skip it
#6I greatly appreciate this attention to detail, and there isn't enough of this in the world. For example, in Visual Studio popups on hover happen so fast you can barely select anything, or you end up clicking on the popup instead of selecting a word.
Opus Magnum suffers from this. It feels like punishment for taking the most direct route to get the cursor where I want it.
Re: Tooltips need a delay, and then they need to skip it
#7I greatly appreciate this attention to detail, and there isn't enough of this in the world. For example, in Visual Studio popups on hover happen so fast you can barely select anything, or you end up clicking on the popup instead of selecting a word.
If there is a primary UI element on screen that the user can interact with and moving the mouse towards that causes a secondary, alternative, UI element to appear, the second element needs an active modifier key to bring it up. Tooltips and such are total trash and get in the way of usability. If you have something important then put it on the screen to begin with don't have it randomly jump in front of the user who is already mid action with something else.
Re: Tooltips need a delay, and then they need to skip it
#8I think I would describe this as an example of hysteresis. Neat!
https://en.wikipedia.org/wiki/Hysteresis
Re: Tooltips need a delay, and then they need to skip it
#9I think I would describe this as an example of hysteresis. Neat! https://en.wikipedia.org/wiki/Hysteresis
Interestingly, there are more use cases for hysteresis in UI design, e.g. it was famously used in nested menus in Windows: https://www.mackido.com/Interface/hysteresis.html
I think there was also an article about it on The Old New Thing, but I can't seem to find it anymore.
Re: Tooltips need a delay, and then they need to skip it
#10I ran into the same problem about 20 years ago when implementing hover-based dropdown menus on a website. It was only about 10 lines of JS and a couple global variables but I was the only person who understood it. :-P (These days I would have included more comments.) Naturally, there was a fallback to pure CSS menus, because we weren't barbarians.
what did the JS provide that the CSS solve wasn't the only solve?