Tooltips are small UI elements that users encounter on a web page or application when they hover over other elements on the page. As the name suggests, Tooltips provide suggestions about an item or process on apps or web pages.

In other words, Tooltips are text boxes that display a brief explanation of the elements of an application or web page.

When thinking about an optimal UX, a good tooltip design can have a big influence on which users understand your features and end up being successful. Conversely, poor tooltip design presents tooltips as irritating and loses all credibility.

The problem with tooltips

While they allow you to squeeze additional information onto the screen, they have a number of issues.

#1. They are difficult to spot:

Some users won’t notice a clue, which means there is a high risk that they will never see the content on it.

#2. They obscure the screen:

You cannot read the hint and use the rest of the screen at the same time.

#3. Can be cut into small screens:

As the tooltips overlap, they can be cut out by smaller windows.

#4. Hover content viewing is inaccessible:

Hovering is not always the intention to trigger a check. The user can move the cursor over a suggestion that accidentally triggers it.

You can provide a comparable experience for keyboard users by displaying the index in the foreground. But this is unconventional and still excludes touchscreen users.

Possible Components

• Copy: Tooltips can contain a header and body text, or just body text. For smaller tooltips, skip the formalities and go straight to the body of the text.
• Exit: When a user closes the tooltip message. This can be as simple as an “x” or “close” button, or it can be activated from a user interacts with a certain item.
• Progress Bars: Tooltips that are part of a multi-product can include a progress indicator to let users know where they are in the process.

4 Simple Rules For Better UX

• Treat every tooltip like a rub — you’re asking your users to read something, so make sure they get immediate value from that information. Also pay attention to the copy. Make it clear, concise and relevant for each step of the user journey.
• Explain only the things that are indistinguishable from the interface / design.
• Make suggestions as contextual as possible — trigger them based on user actions and display them to the most responsive group of users. Also, make sure they are accessible to users who navigate your website using a keyboard and screen reader.
• Show them one at a time and don’t show more than 3–4 in a row. Users tire quickly and need time to act / digest what you have taught. As with everything else, analyze them and try them out!

Conclusion

To say that tooltips are paving the way for a bad user experience is just a flaw. If you know how and where to use tooltips, they will help you deliver a great user experience.

Keep in mind that tooltips are primarily about efficiency. They should be on your app or website to make it easier for your users.