Tooltips are a very helpful tool for educating users. They help users understand unknown or unfamiliar objects that aren’t described directly in the user interface. Tooltips act as just-in-time support — they provide information users need when they need it, with minimal effort on their part (all users have to do is to hover the mouse over the object and wait), and help app developers use screen space more effectively (reduce screen clutter).

A tooltip is a small pop-up window that provides additional information about the UI element. Image credit: Dribbble

However, poorly designed tips can be annoying, distracting, unhelpful, overwhelming, or in the way.

How It Works

Tooltips are displayed automatically when users hover the pointer over an object, and goes away when users click the control or move the mouse away.

Alternatively, tooltip can be called by focusing on an element with a keyboard (usually the tab key).

When to use tooltips

UI element without a text label. If an UI control has little or no descriptive text but the user needs some short explanation to understand how to interact with it, then a tooltip works well for this case. Toolbars typically utilize tooltips for controls they provide.

Toolbar’s elements in text editor have tooltips.

UI element that requires additional information. Tooltips can be a form of progressive disclosure controls—they can provide additional contextual information on-demand. However, it’s vital to understand that the text should be supplemental —meaning that the user should complete the primary task without reading this text. If the text is essential, then it’s better put it directly in the UI to minimize the risk that users overlook it.

Tooltip that appears over a file on the desktop and provides a detailed information about the file.

Rarely used features or features that can be interpreted differently. Tooltips work good for rarely used or context-specific features.

StackExchange app. If we didn’t have tooltips on all these up & down arrows next to each answer, some people might think they’re for scrolling.

When to avoid tooltip

Perhaps the most important rule to follow is to never use tips as a substitute for good design. If a button, or other object requires explanation and users need to check a tip to understand its meaning, than the design is bad. Do not create a workaround for the problem of bad design, fix the problem.

You shouldn’t use tooltips in following situations:

When users need to interact with the tip’s content. Users can’t interact with tip’s content because moving the mouse makes them disappear.

Good Tooltip Design

Good tooltip has following properties:

Easily discoverable

The problem with tooltips is that they lack of visual clues —there’s no conventional visual clues, such as pointer change, that can indicate that a certain object has a tooltip. Yet, your users still have to figure out that some objects have a tooltip (in most cases, users discover this behavior by playing with your UI).

But you can improve discoverability by using tips consistently. That’s why if you decide to provide tips for some objects, you should provide tooltips for all similar objects. Sometimes doing so can be challenging, because you must also make sure that the tips are helpful and not obvious.

Provides appropriate information

Good tooltip contains concise and helpful information:

The text in tooltip should be short and well-formated (strive to 20 chars per row).

**Don’t:** Large blocks of text are difficult to read and overwhelming. Image credit: Microsoft

**Do:** Formatted text is much easier to read and scan. Image credit: Microsoft

Tip text must be helpful. It shouldn’t just repeat what is already visible on the screen.

This tooltip isn’t helpful for your users.

Contains static information

Users don’t expect tooltips to change from one instance to another, so they are unlikely to notice changes in dynamic content, such as status information.

Has an appropriate placement

Tooltips should be placed near the object being hovered, usually at the pointer’s tail or head if possible. However, tooltips should never be placed in a way that interferes with what the user is doing.

**Don’t:** cover the object the user is about to view or interact with.

**Do:** Always place the tip on the side of the object, even if that requires separation between the pointer and the tip.

Conclusion

Tooltips are small details that can make your product more usable. When introducing tooltips, design them to make easily and show concise and helpful, information that help users interact with your product.

Thank you!