\

Tooltips need a delay, and then they need to skip it

140 points - yesterday at 4:35 PM

Source
  • ProxCoques

    yesterday at 9:30 PM

    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.

      • pastel8739

        today at 3:13 AM

        Because every single application rebuilds their own operating system

        • hinkley

          yesterday at 11:53 PM

          Chesterton's Fence.

          Why on earth do we need this thing here?

          Oh, that's why.

          • today at 1:18 AM

            • projektfu

              today at 1:19 AM

              Raskin left Apple in 1982.

          • brixie

            yesterday at 8:18 PM

            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.

            • hurrell

              yesterday at 6:54 PM

              I think I would describe this as an example of hysteresis. Neat! https://en.wikipedia.org/wiki/Hysteresis

                • xg15

                  yesterday at 7:06 PM

                  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.

                    • lelandfe

                      today at 2:54 AM

                      Like the HN post we're commenting on, so too does this example also get regurgitated every few years.

                      Find modern examples by Googling "menu safe triangle." Here's one from 5 days ago https://www.framer.com/blog/cursor-trajectory/

                      > I asked the Framer Agent to fix it, and within minutes it had built and applied what I now call trajectory-based menu aim

                  • thaumasiotes

                    today at 2:14 AM

                    >> Hysteresis is the dependence of the state of a system on its history. For example, a magnet may have more than one possible magnetic moment in a given magnetic field, depending on how the field changed in the past.

                    How is this different from the observation that, say, a non-magnetic iron ball may have more than one possible velocity in a given gravitional field, depending on whether it was recently thrown upward or dropped from above?

                • compiler-guy

                  yesterday at 5:35 PM

                  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.

                    • wging

                      today at 5:23 AM

                      Years and years ago, there was an article about the way Amazon.com's menu dropdown worked. It had the same spark (of careful attention to user behavior and needs): https://news.ycombinator.com/item?id=5330998 / https://bjk5.com/post/44698559168/breaking-down-amazons-mega...

                      • nlawalker

                        today at 3:35 AM

                        My favorite is the info icons that show a tooltip on hover, but if you click them, they disappear the tip if itโ€™s showing and never show it if it hasnโ€™t appeared yet.

                        • gblargg

                          yesterday at 5:55 PM

                          Opus Magnum suffers from this. It feels like punishment for taking the most direct route to get the cursor where I want it.

                          • wang_li

                            yesterday at 6:34 PM

                            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.

                        • phyzome

                          yesterday at 5:34 PM

                          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.

                            • dylan604

                              yesterday at 7:09 PM

                              what did the JS provide that the CSS solve wasn't the only solve?

                                • jcranmer

                                  yesterday at 7:19 PM

                                  Not OP, but my guess is things like timing delay--20 years ago, CSS animations and transitions weren't a thing yet, especially since 20 years ago also puts us in the era of IE6 being a major browser.

                          • nayroclade

                            yesterday at 5:44 PM

                            Chris Coyier also posted a version using only HTML/CSS, no JS: https://blog.master.dev/delayed-then-instant-tooltips-with-h...

                            • kazinator

                              today at 2:55 AM

                              Basically, have a global temperature. When the pointer is in something that has a tooltip, the temperature rises. Otherwise it cools (possibly at a different rate). A tooltip is shown only when the pointer is in bounds, and the temperature is above a certain threshold.

                              • goda90

                                yesterday at 8:03 PM

                                What about using mouse velocity? If the mouse is changing position at a certain rate, don't show the tooltips.

                                  • jareklupinski

                                    yesterday at 8:06 PM

                                    i only show tooltips if you wiggle the mouse cursor over an element

                                      • thoughtbefore

                                        yesterday at 10:23 PM

                                        On a Catholic church site I designed you have to do the cross pattern with your mouse and say 3 Hail Marys to see the tooltip.

                                        There is no contact form. Only a Confession Textarea

                                          • kwarcode

                                            today at 2:06 AM

                                            At least the cookie popup comes with wine

                                • Prydown

                                  today at 2:40 AM

                                  Windows taskbar has done this forever and I never once noticed it consciously. Good catch.

                                  • jameshart

                                    yesterday at 11:04 PM

                                    Feels like the delay also gets implemented into displaying the tooltip on tap on a touch interface which is probably an error.

                                    • zx8080

                                      today at 2:07 AM

                                      Is this post text claude-generated? Very creepy to read around the solution section. It reads like the agent report.

                                      • halostatue

                                        yesterday at 5:44 PM

                                        The pure CSS version seems more interesting to me: https://blog.master.dev/delayed-then-instant-tooltips-with-h...

                                        • self_awareness

                                          yesterday at 8:57 PM

                                          Hilarious. Web devs discovering UX from Win95. What's next, 3d buttons?

                                            • tgv

                                              today at 5:18 AM

                                              MacOS had it even earlier. I think it's because there's not a mature UI framework out there. They come, have their moment in the spotlight, and are replaced. There's also a ton of them. And they are often written by a very small group of people without deeper understanding of ergonomics, and don't live long enough to get this level of attention. You should be glad if it still gets bug fixes after 2 years.

                                              • ProxCoques

                                                yesterday at 9:32 PM

                                                I know right? It's like interaction design came and went over a period of 30 years and now we're back to the beginning again.

                                                  • quacked

                                                    yesterday at 11:42 PM

                                                    I spend a lot of time seething at how poorly modern software interaction is, and I've come to the belief that they basically solved most of the window-based GUI computing interactivity problems by around XP, and have just been gutting them since then.

                                                    My three most-hated modern trends

                                                    - Disappearing scroll bar with content that you have to scroll for

                                                    - Pills going across the top of the screen that are "most-used" filters instead of a real filtering menu

                                                    - Clickable text and non-clickable text appearing the same. I mean come on. Who the fuck is designing these things? That's the one I can't wrap my mind around. How can a self-respecting programmer put out a UI where the display and clickable elements look exactly the same? What are we doing man

                                                      • nxc18

                                                        today at 12:00 AM

                                                        I think the real problem is we donโ€™t have a native-quality UX toolkit on the web - the built in controls are just horrible. So every app has to reinvent the wheel from scratch, or use one of a few hundred (thousand) web component libraries that have all also had to reinvent the wheel from scratch (I guess a div and some text rendering isnโ€™t scratch per se but you get my point)

                                                          • thaumasiotes

                                                            today at 2:20 AM

                                                            Well, Microsoft was interested in making it easy to develop Windows applications, and also in making it easy and pleasant to use Windows applications. They had reason to invest in learning how that could be done and in writing utilities that would let you benefit from their knowledge; doing that made more money for them.

                                                            Browsers are different. They don't really benefit from being written for, or from being used. This seems like enough to explain the difference. They provide some functionality, and giving your users a good experience is your problem, not theirs.

                                                            I feel like I've seen complaints that Apple has forgotten things it already knew about how to design a usable interface; that wouldn't be explained by this model.

                                            • cush

                                              today at 4:06 AM

                                              I was disappointed to see the new web popover api doesn't have this basic usability feature built in

                                              • jay_kyburz

                                                yesterday at 8:12 PM

                                                Perhaps I'm just an old grump, but I prefer the No Delay version in the example.

                                                I like predictable, consistent, and fast.

                                                  • broken-kebab

                                                    today at 12:14 AM

                                                    Same. To me exactly delayed version is annoying. Non-obvious rules which guide behavior make it feel like there's a bug.

                                                    • denislexic

                                                      today at 2:23 AM

                                                      [dead]

                                                  • jobuildsstuff

                                                    today at 2:24 AM

                                                    [flagged]