Join the discussion
Write your take first — we'll ask for email only when you're ready to publish.
- Hacker News
- The pure CSS version seems more interesting to me: https://blog.master.dev/delayed-then-instant-tooltips-with-h...by halostatue
- Chris Coyier also posted a version using only HTML/CSS, no JS: https://blog.master.dev/delayed-then-instant-tooltips-with-h...by nayroclade
- I 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.
by phyzome - The example shown at the top is really bad.
“Before (Without the delay of 200ms)” shows obvious delay in appearance. I think this is because of the very inappropriate fade-in.
“After (With the delay of 200ms & instant tooltips)” doesn’t show the instant behaviour at all, only one tooltip.
by chrismorgan - I 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.by compiler-guy
- I think I would describe this as an example of hysteresis. Neat! https://en.wikipedia.org/wiki/Hysteresisby hurrell
- This looks it's describing the same technique as the last example in https://emilkowal.ski/ui/you-dont-need-animations (and that whole post is worth a read, I think, if you found this interesting).
It's such a small detail that I wouldn't have otherwise noticed (because I don't build animations, so it doesn't cross my mind), but now that I know about it, I think about it all the time.
by brixie - It will never cease to amaze to me that Apple (under Jef Raskin who also wrote about this in The Humane Interface) observed and fixed problems with interactions like this in SYSTEM 6 in like 1993 or something - only for the same problem to have to be re-descovered and re-fixed decades later.by ProxCoques