How do you make sure users know that there is a tooltip attached to something?

Question

I've read Do people actually use tooltips?, and there are mixed answers there - I know a lot of people do use tooltips, but there are still a lot of people, in my opinion, that don't use tooltips.

How, from a design perspective, do you tell users (especially new users to a website) that they can rollover a specific element to find out more?

Would you make that element flash? Or would that be too intense?

Answer 1

Observations

1. Browser implementation of tooltips is not predictable. Some browser show tooltips immediately, and some show them after a delay. The position and styling of the tooltips is not predictable across different browsers.

2. Users often miss native browser tooltips because (1) they are small; and (2) most browsers require users to pause the cursor over an element before the tooltip is shown, so users moving a mouse across an element may never see the tooltip. Here's a typical browser tooltip that shows after a delay.

   

---

Modern approaches

To avoid depending on browser tooltips, many modern apps implement custom tooltips which provide UX designers with much better control over placement, styling and microinteractions for the tooltip.

Here is an example of a modern approach to tooltips.

These approaches are variously used:

• Show the tooltip immediately instead of after a delay. This avoids awkward affordance of pausing the cursor before a tooltip appears. This is very common nowadays (e.g. used in Gmail). Note that sometimes to avoid the "flash" effect when a user is moving the cursor quickly across an element, you may want some controlled delay.

• Brighten the tooltip. Use colored backgrounds, larger fonts, drop-shadows, or irregular box styles (e.g. callout) to make the tooltip bolder/more noticeable. Animation can also be effective (see the live example above).

• Indicate the interactability of an element better. You can use placeholders as @DvirAdler suggests above. However, they may appear intrusive for non-beginners who may get tired of seeing them all the time. You can also use color or the convention of a dotted underline to indicate that an element has a tooltip (or at least, is interactable). Here are a few alternatives for indication:

  

You will have to determine which combination of approaches works best for your site.

Answer 2

There's a simple and classic solutions for this.

You just add a tiny icon letting them know there's a helpful tooltip waiting for them:

There a are many occasions where you want to help first time or rare users, but you don't want to clutter the screen with lengthy explanations. Tooltips are a greta solution, but as you mentioned, many people are not aware they are there. Thus this tiny indicator invites the user to look for help only when they need it.

Don't even think about making those icons flash. They should be subtle, and not get in the way of people who have the right to ignore them.

Answer 3

One thing I’ve seen more websites doing is changing the mouse cursor to the "help" style:

Try it on W3Schools.

This real-time change can help a lot because it lets users know that the area where they have the mouse is special. This is best combined with redundant display options that detect the user’s situation and show the tooltip in a way that’s going to work on their screen, in their browser, etc.

Answer 4

There are some sound answers here but I would like to add to it by saying that if you are that dependent on users reading what is in your tooltips, it perhaps should not belong in tooltips, but already visible for your user.

Answer 5

There are a few ways to approach this. Consider an intro tutorial for the first time a user interacts with the application. It could quickly show them what they can do and how to do it. Check out toggl, new users are given a tutorial on how to do everything.

The down side to this of course is that it may mean your application may be too complex and you may need to rethink the solution to the problem you are solving for. But often times its more of a suggestive guide.

Another option might be to test variants of how the user could interact with the element see what questions and challenges their actions cause. Check out usabilityhub or trymyui you could also a/b test or use a heatmap tracking tool like crazy egg 2¢

Answer 6

personally i like the IDM tool-tip.

you can let the first tool-tip appears automatically . then you can navigate with arrows or buttons . however every time there should be a way to backup and a exit form the tool tip. because for a experienced user of your application might get irritated. and now a days newly updated Firefox browsers use this type of automated tool-tip and navigation for a new users. actually that give a great user experience for beginner.