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.
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
Customer Journey Map
What is a Customer Journey Map A Customer Journey Map is a vi...
Augmented Reality
What is Augmented Reality Augmented Reality (AR) is a technol...
Mental Model
What is a Mental Model A Mental Model is an individual's inte...
Decision Matrix
What is a Decision Matrix A Decision Matrix is a systematic e...
Stakeholder Interviews
What are Stakeholder Interviews Stakeholder Interviews are st...
Menu-Driven Interface
What is a Menu-Driven Interface A Menu-Driven Interface is a ...