Jovin LiewWhat is a tooltip component?
Tooltips display informative text labels that provide contextual support, usually on hover, but sometimes on click or tap.
When used effectively, tooltips can significantly improve user experience by providing timely, relevant information without cluttering the main interface.https://ujasntkfphywizsdaapi.supabase.co/storage/v1/object/public/content/glossary/tooltips/d15a5a2e-6210-4bf8-a89c-74549fb351ca.png
Tooltips are commonly seen in design patterns like: Onboarding, Feature explanation, Feature discoverability, Form field help, and Promotional info.
Examples of what tooltips look like in mobile apps.| When to use tooltips? | ||
|---|---|---|
| Useful context | Provide brief, helpful context or explanation for specific features. | |
| Progressive disclosure | To explain unfamiliar terms, icons, or new features discovery. | |
| Non-essential tips | Non-essential information that only some users might find helpful. | |
| User onboarding | To offer guidance during user onboarding to direct user's attention towards key features. | |
| When not to use tooltips? | ||
|---|---|---|
| Complete attention | If you need a user's complete attention, you should use a dialog instead. | |
| Avoid repeast usage | Content users already know about and come back to frequently. | |
| Information you can't miss | Essential information relevant to every user - it should be on the page instead. | |
Tooltips on mobile v.s. tooltips on web
On web, tooltips are usually triggered when a user hovers over an info icon.
On mobile, tooltips are triggered when users click on an info icon, or, it can be automatically triggered to nudge user's attention towards a new feature being introduced.
What is the anatomy of a tooltip component?
Anatomy of a tooltip.What are the design variants of a tooltip?
We studied 2,300+ tooltip UI components on Mobbin from real-world examples and found the following design variants.
1. Caret tip
Most tooltips come with caret tips to bring attention to a specific UI element or icon.
Examples of caret tipped tooltips.You can also have tooltips without caret tips.
Examples of tooltips without caret tips2. Rounded container
Depending on a brand's design system - tooltips may have different degrees of border radius - here are some examples of rounded contextual tooltip displays.
Examples of rounded tooltip containers.3. Tooltips with icons
A tooltip with an icon incorporates a symbolic image alongside the text, making the tooltip more visually distinctive and easier to understand at a glance.
In the below examples, users have to click on the (i) icon to activate the contextual tooltips.
Examples of tooltips with icons.4. Tooltips with CTA buttons
This variant of tooltip combines helpful text with clickable buttons, enabling users to interact or take specific actions within the tooltip itself.
Examples of tooltips with CTA buttons.4. Tooltips with overlay
To bring additional focus to your tooltips, consider adding an overlay in the background. However, this also means that users will be forced to interact with it.
Examples of tooltips with overlay.When to use a tooltip?
1. Feature explanation
Tooltips can be used to provide explanations or labels for icons or symbols that might not be immediately clear to the user. When the user taps or hovers over the icon, a tooltip appears to explain its functionality or purpose.
Examples of tooltips in feature explanation.2. Feature discoverability
Tooltips can be used to highlight new or hidden features of the app. When a new feature is introduced or a feature that may not be obvious to the user is available, a tooltip can appear to inform and guide the user on how to use it.
Examples of tooltips in feature discoverability.3. Form field help
Tooltips can be used to provide guidance or instructions for filling out specific form fields. When the user taps or focuses on a form field, a tooltip can appear to explain what kind of input is expected or provide examples.
Examples of tooltips in form field help.4. Promotional info
Tooltips can be used to provide information about an ongoing promotion, similar to highlighting a feature of an app. More importantly, these tooltips are temporary and do not continue on to other pages.
Examples of tooltips in promotional info.Conflicting UI elements: Menu, Toasts
1. Tooltip v.s. Menu
While Dropdown Menu might share the same appearance as Accordion, with a caret, they are not the same thing. Accordion displays content, while Dropdown Menu displays a list of options.
Examples of menus.