31

I'm working on web site in which a "ribbon" submenu pops up as soon as the mouse touches one of the main menu items. I'm trying to explain to the designer that it should wait until the cursor has rested on the menu item, and not pop up when the mouse just happens to pass over it. I'm not sure how long (in milliseconds) that wait should be.

I can't link to the web site in question, but I figure the same principle applies to standard tool tips. How long should it take for a tool tip to pop up?

Improve this question
2
  • Just stumbled upon this old question. The site was sportsbusinessjournal.com Looks like the ribbon is still there as of this writing and they do have a delay. :)
    – Patrick McElhaney
    Oct 29, 2015 at 14:45
  • Checking in again, the navigation's been redesigned. It no longer has submenus that appear on hover.
    – Patrick McElhaney
    Mar 6, 2019 at 14:48

7 Answers 7

Reset to default
23

If anyone is still looking for updated answers around this subject, Nielsen Norman has a great article on the subject: https://www.nngroup.com/articles/timing-exposing-content/

  1. Mouse cursor enters target area: display visual feedback within 0.1 seconds.
  2. Wait 0.3–0.5 seconds.
  3. If cursor remains stopped within target area, display corresponding hidden content within 0.1 seconds.
  4. Keep displaying the exposed content element until the cursor has left the triggering target area or the exposed content for longer than 0.5 seconds.

The 300-500 millisecond pause is to ensure user intent is to see whats behind the menu or tooltip and not mousing by on their way to something else.

Improve this answer
0
14

I couldn't find any conventions on this matter, but I found a couple of libraries where the tooltip seems to be set at a default of 500ms, which seems quite reasonable.

Anyway, I think you should go from there and tweak it until it feels right. You can try it out with a few users and evaluate their feedback.

http://msdn.microsoft.com/en-us/library/ms531435%28VS.85%29.aspx

http://www.jinsight.com/jetchart/api/com/jinsight/jetchart/ToolTip.html

https://www.adobe.com/livedocs/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=tooltips_074_10.html

Improve this answer
3
  • 2
    This is an appeal to authority with no evidence that those library authors are particularly good at UX, or how they decided on their defaults.
    – IMSoP
    Feb 24, 2015 at 11:49
  • 2
    For what is worth, after revisiting my answer, I don't even think this is correct. Whatever approaches to delay=0 I think is better. But again, this is backed up only by my own experience and knowledge on the topic.
    – Ignacio
    Feb 25, 2015 at 12:41
  • There are no magic numbers, but I found that a delay of 250-350 ms makes sense - specifically when you want to allow users to copy text from a tooltip. It's enough time to allow users to mouseover the tooltip before it slips away but not too much time that it becomes confusing (the 'un-hover' action can easily be linked by users to the tooltip being hidden)
    – Shahar Dekel
    Mar 17, 2016 at 14:03
5

IF you fade the tool-tip in slowly you can start as soon as the mouse rests on the hot-spot. Just remember to cancel the animation when the mouse moves out that way if the mouse only slides over for a second the tool-tip wont show and if the user stops but then moves on you don't have a tool-tip showing on the wrong part of the page.

Improve this answer
4

If the decision to use a tooltip is well thought-out and the tooltip is useful and important. Do not put a delay on it.

A delay can add confusion, you don't want the user asking the same question you are asking here as they are using your site or app.

If you think the tooltip information is not mandatory but might help a user if they get stuck then use a small question mark icon and let them click on that if they need more information.

Improve this answer
1
  • 1
    This is not correct, even the browsers implement a delay for tooltips (just hover over the "add a comment" link below). When using tooltips as hints for vertical nav items or to show full strings that have been truncated by ellipses, we don't want the user to see flickering tooltips as they massage the options or table rows. Plus, tooltips occlude underlying content and we only want to show them when they're wanted. The gesture for when the user wants a tooltip is hover and pause. A short timer is good UX.
    – grav3nimag3
    Jun 15, 2017 at 15:31
4

It really depends on what your tooltips are for.

We've got lots of toolbar controls and buttons which simply use the Material Design Icon set with no text. Most of these are self explanatory but we've added tooltips with descriptions which also display the keyboard shortcuts where available.

When we had no delay, it was very annoying for users who'd learnt the software and didn't require the tooltips any more. Moving the mouse over a few buttons would immediately show the tooltips.

We settled on a 1 second delay as this is slow enough not to appear in normal use and when you want to see what the button does you wait a little while.

Improve this answer
1
  • Can I try your software somewhere online? I would like to see this in practice, we would like to implement something similar in our web application.
    – Roland Pokornyik
    Jan 31, 2018 at 14:52
2

There is, of course, always an option to make it click based. I think that would actually work better and make the application universally usable (mobiles&tablets).

There's also a project in JavaScript which you could take for an inspiration in this field, the hoverIntent project

http://cherne.net/brian/resources/jquery.hoverIntent.html

HTH

Improve this answer
2
  • The issue with this is that sometimes you want a tooltip for the item being clicked. You don't want to have to click the DELETE ALL RECORDS button to see the "May have career ending consequences." tooltip.
    – Joshua Drake
    Oct 20, 2017 at 17:16
  • I don't think having a DELETE ALL button on anything makes a good UI/UX.
    – mare
    Nov 3, 2017 at 14:21
1

Adding onto @Nacho 's answer, I've quoted a reason why very short delays or instantaneous appearance should be avoided for tooltips:

Tooltips, expanding ads, and calls to action or information boxes that appear over list items (such as quick-view boxes on thumbnails from product-listing pages) are other examples of common elements with hover interactions that can prove annoying to users if triggered too sensitively.

Instantaneous response is undesirable for what should be optional information, if a tooltip is considered the appropriate display context. The article also provides timing guidelines:

the user’s intent to expose any corresponding hidden content can be assumed either immediately upon click or tap, or after the mouse cursor paused movement and remained in the target area for around 0.3–0.5 seconds, at which time the hidden content can safely be animated onto the page

Source: NNGroup

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.