How to Design the Small But Powerful UI Pattern

What separates a good tooltip from an annoying one?

Thank you for reading this post, don't forget to subscribe!

An annoying tooltip is overbearing. It’s redundant. Or worse, it’s unclear and distracting. A bad tooltip is a lazy fix to a poor user experience.

A good tooltip is one that the user doesn’t really notice. It helps a user get the job done and then gets out of the way. It could look pretty, but what really matters is whether or not it provided value.

As Marc Schenker of Web Designer Depot writes, “Good tooltips are designed to be so discreet that, sometimes, you’d swear they were never there…You only really miss them if they’re not there all of a sudden to help you achieve a task.”

You’ve probably seen tooltips in some of your favorite products, like Facebook, Twitter, and Slack. When used with consideration, tooltips can be powerful in guiding users to take action in your product.

Tooltip Definitions

Wikipedia defines a tooltip as “common graphical user interface element…used in conjunction with a cursor, usually a pointer.”


Google’s Material Design guidelines provide a little more information:

Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element.Tooltips identify an element when they are activated. They may contain brief helper text about its function. For example, they may contain text information about actionable icons.

Traditional tooltips—think back to old Microsoft applications—only appeared when the cursor hovered over an element. Tooltips today are much more dynamic. Many web products use tooltips that can appear upon landing on a page, triggered after interaction with another element, on click, and more.

Read Full Article

Leave a Reply

Your email address will not be published. Required fields are marked *