Tooltip. Image by Component Gallery.

A tooltip is a small box of explanatory text that appears on the screen when a user hovers over an icon. Despite their small size, tooltips play an important role in creating great UX.

The purpose of tooltips

Tooltips exist to provide additional context and guidance to users as they navigate an interface. They can:

Explain an unfamiliar icon, field name, or function

Tooltip is used to describe the function of unlabeled icons. Image by Adobe Spectrum.
Tooltip is used to explain the element that isn’t described directly in the user interface. Image by PatternFly.

Offer instructions on how to complete a task

Contextual instruction that Shopify offers.
Contextual tooltip in Uber Eats.

Provide additional helpful information

Tooltip provides additional information for a data visualization. Image by sigmacomputing
Tooltip explains the price for the Uber client. Image by Uber.
The tooltip explains why an additional fee was charged. Image by Uber.

Educate users on how to use the product more effectively

Additional instructions that help users interact with a product more effectively. Image by Uber.

Reassure users

Tooltip explains system behavior to the users. Image by Adobe Spectrum.

How to design tooltip

Here is a quick tutorial on how to design interactive tooltip in Figma.

Interaction behavior

Tooltips should have a 300ms entry delay when hovering over an object with a mouse, and they should disappear after 1 second.

Placement

Tooltips can appear above, below, and to each side of the UI element depending on screen real estate and intent.

Tooltip placement. Image by Adobe Spectrum.

When placing a tooltip, ensure it doesn’t overlap the UI element that the user currently interacts with.

The tooltip overlaps the input field that the user is currently interacting with. Image by Adam Silver.

Design recommendations

Use tooltips sparingly

Too many tooltips can overwhelm users. If you’re building something that requires a lot of tooltips, work on clarifying the design and the language in the experience.

Don’t add too many tooltips. Image by ProCore.

Prioritize explanations for complex, high-risk, or frequently misunderstood items.

Priortize tooltips. Image by ProCore.

Don’t use tooltip to communicate critical information

Don’t use a tooltip to convey critical information (like your “payment method expired”).

Don’t use tooltips to communicate critical information. Image by Uber.

Use tooltips to provide useful additional information or clarification.

How to use tooltips in UI design. Image by NNGroup.

Succinctly describe or expand on the element they point to

Tooltip text should be clear, succinct, and scannable. Use plain language and get straight to the point (explain what the user needs to know in as few words as possible). Aim for a character count limit of 20, which is between 2 and 5 words with spaces included.

The first tooltip text (“Bookmark this course”) is preferable to the second one because it’s concise and scannable. Image by pluralsight

Don’t add any interactive elements in a tooltip

Tooltips appear only on hover or when in keyboard focus; when the focus switches to the other element, the tooltip disappears. For that reason, they shouldn’t contain any links or buttons.

Don’t place any links or buttons in a tooltip. Image by Adobe Spectrum.
Don’t place Dismiss control (x) in a tooltip. Image by Uber.

Keyboard accessible tooltips

Tooltips must be accessible via keyboard navigation and screen readers.

Keyboard interaction

  • Tab: Move focus on the trigger and open the tooltip.
  • Esc: Close the tooltip

Want To Master Product Design?

Try Interaction Design Foundation. It offers online design courses that cover the entire spectrum of product design, from foundational to advanced level.

UX Design Courses

This post contains affiliate link(s)


Tooltip: A small design element with a big UX impact was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.