What is a tooltip?
A tooltip is a short, informative message that appears when a user interacts with a graphical user interface element. Its primary purpose is to provide the user with additional information about a page element or feature.
Tooltips are user-triggered and most commonly appear as users hover over any active element (buttons, icons, text links, etc.). Tooltips don’t connect to the whole task flow, they are only meant to explain details or give extra guidance about a specific action.
Because tooltips are triggered by a hover gesture, they can only be viewed on devices that have a mouse or keyboard and aren’t usually found on touchscreens.
Tooltip best practices
Tooltips have been around for a long time, but they still tend to be misused. Follow these best practices to increase engagement on your site by helping its visitors.
1. Insert helpful information
Use tooltips to display additional information that might help the user, not required information.
❌ Don’t:
✅ Do:
2. Use arrows
When multiple elements are close together, add arrows to help users understand which element the tooltip refers to.
❌ Don’t:
✅ Do:
3. Make tooltips stand out
Don’t be afraid to use colors in the tooltip design to make the tooltips more visible to users.
❌ Don’t:
✅ Do:
4. Allow to confirm or exit
Always make sure that users have a way to confirm or exit the tooltip, and the tooltip doesn’t remain covering parts of the task flow.
❌ Don’t:
✅ Do:
5. Avoid repeating the copy
In the tooltip, provide additional and helpful information. Make sure you don’t repeat already visible text.
❌ Don’t:
✅ Do:
6. Avoid covering other elements and text
When choosing the place to display the tooltip, try to make sure you don’t cover important parts of the rest of the page with tooltips.
❌ Don’t:
✅ Do:
Bonus tooltip suggestions
- Tooltips should be consistent in style and design to train users to be more responsive to them
❌ Don’t:
- When multiple tooltips are used in a sequence (e.g., introducing a new feature), there should be a progress bar indicating how many tooltips will be displayed, and users should be able to skip them at any time
✅ Do:
- When introducing new features, you can use eye-catching (but not too distracting) interactive elements to attract user attention
✅ Do:
Have you found this useful? Need more tips to enhance user journey on your website? Drop us a line at info@scandiweb.com or browse our UX and CRO services!
