Tooltip
UX Design
What is a Tooltip
A Tooltip is a contextual interface element that appears when users hover over, focus on, or click an item. It provides additional information, explanations, or instructions about the element without cluttering the main interface.
Types of Tooltips
Common variations include:
- Simple Text: Brief labels or descriptions
- Rich Tooltips: Including images, links, or interactive elements
- Input Hints: Form field guidance and requirements
- Feature Tips: Explaining functionality or shortcuts
When to use Tooltips
Implement tooltips when you need to provide supplementary information without overwhelming the interface. They're particularly valuable for icon-only buttons, complex functions, or when space is limited for full explanations.
Best Practices for Tooltips
Design effective tooltips by keeping content concise and relevant, ensuring appropriate timing and positioning, maintaining accessibility, and avoiding critical information that should be visible by default.
Find your next job!
Use tooltips for supplementary information that's helpful but not essential for task completion. If information is crucial for user understanding, consider displaying it directly in the interface.
Consider using tap interactions instead of hover, ensure touch targets are large enough, and test positioning carefully to avoid off-screen content. Consider alternative patterns for critical information.
Generally, 200-300 milliseconds works well for hover tooltips. This provides enough time to avoid accidental triggers while still feeling responsive. Adjust based on user testing and context.
UX Design Terms
See more UX Design terms
Vertical Rhythm
What is Vertical Rhythm Vertical Rhythm is a design principle...
Heatmap
What is a Heatmap A Heatmap is a data visualization tool that...
Product Development Cycle
What is a Product Development Cycle The Product Development C...
Call-To-Action
What is a Call-To-Action A Call-To-Action (CTA) is a design e...
Redlining
What is Redlining? Redlining is the process of adding detaile...
Gestalt Principles
What are Gestalt Principles Gestalt Principles are fundamenta...