27

For what widgets would you want to have a tooltip? I can see the case for icons in toolbars without text. What about for buttons with labels? Hopefully the label clearly communicates what the buttons does, but what if you want to give more info about the button?

If you do use them, I'm concerned that the user will expect other UI widgets have them. If the mouse over something and there's no tooltip, will this lead to a bad user experience?

1
  • 1
    Keep in mind, it is advisable to not use tooltip to provide information that you can't read elsewhere. Mobile phones, screenreaders, and seo crawlers can't mouseover. (although can sometimes see the text anyway depending how they're implemented)
    – DasBeasto
    Jan 21, 2016 at 17:32

7 Answers 7

31

If a button, label, or icon has little to no descriptive text or needs some short explanation, then a tooltip works well for this. You can see examples of this all throughout this StackExchange web app, in fact. If we didn't have tooltips on all these up & down arrows next to each answer, some people might think they're for scrolling.

But if the text you use in a tooltip is a redundant rehash of the label, then it's pointless. The unfortunate thing about tooltips is that they cover up the area underneath them. So excessive tooltips can become annoying to the user, especially if the user is trying to ignore them anyway.

Also, if the tooltip is beyond a certain length that the user is going to read, then you really need some other mechanism. After all, the tooltip is only going to be visible for a few seconds.

2
  • 1
    Voted for this answer, but I wanted to add that tooltips can also be really useful in cases where you have elided content elements. For example, in Kiln (the source control app that I work on), commit messages can get long. Depending on the width of your browser, we overflow: hidden and elide the text. The complete message is available in a tooltip if we do that.
    – jasonrr
    Sep 3, 2010 at 17:02
  • upvoted but what do I do on the phone where tooltips dont work?
    – PirateApp
    Dec 28, 2018 at 7:39
14

Microsoft offers some useful guidelines for tooltips—when to use them and when not to.

In the Windows User-Experience Interaction Guidelines (a great resource, by the way!), if you look under Tooltips and Infotips, you'll find the heading Is this the right control? and, below that, the heading Design concepts.

3

I find tooltips to be more hassle than they are worth. Hard to read, disappear when you are trying to read them, too little room to say anything sensible. I'm not a fan, yet, truth be told, I still use them anyway in certain places.

1
  • 6
    I, on the other hand, hate it when they are not there. Oct 1, 2012 at 13:03
3

Although consistency is important, you don't have to be fanatic about showing the tool tip in every single place.

Have a look even at this page - some of the elements have tool tips and others don't. Actions have tool tips, as the user might need more info before doing something - but not always (for example, the self explanatory "questions", "badges", "users"... don't).

Other elements like "asked Today" are not actions, but it's very reasonable to show a tool tip showing the exact date.

What ever you do, don't forget that touch devices can't use tool tips...

1
  • Touch devices can use tooltips if they're made correctly: i.e. if they are shown/hidden when clicked and not just when moused-over.
    – Luke
    May 13, 2016 at 21:08
2

By widgets, I am assuming you mean page elements. There really isn't any harm in using tool tips as long as you don't use them to convey vital information. Your example of the label on the button providing more info is right on the ball. If I have a tabbed interface, I often will include a tooltip in addition to the tab's label to describe what is in the section. Just make sure that the information is available somewhere else or that it isn't essential that the user sees it.

1

I wouldn’t worry about users “expecting” tooltips. I have observed in usability testing that a majority of users don’t look for tooltips, even when they are having trouble understanding the functionality of the UI. In fact, I have seen users hover over an icon, bring up a tooltip that had information that would have helped them, and STILL not see it.

1

Note that tooltips are only useful for desktop/laptop users, which if your app/site is expected to have mobile users, their lack of hover will make tooltips impossible. Thus, if tooltips are required to know how something works, your design is flawed.

This is also the best-case scenario; I have only said that tooltips only work on dekstop/laptop clients. This is different than saying, desktop/laptop clients tend to use tooltips regularly.

Icons should be labeled clearly. User interaction should not be required to know how an interface works.

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.