Tooltip and Help Text Design: Character Count Best Practices
Tooltips and help text are the unsung heroes of user interface design. These small text elements guide users through complex interactions, prevent errors, and reduce support requests. Getting the character count right is critical — too short and the text is unhelpful, too long and it overwhelms the user.
Character Count Guidelines
| Element | Recommended Length | Maximum | Notes |
|---|---|---|---|
| Tooltip | 40–80 characters | 150 characters | Must be readable in 3–5 seconds |
| Inline help text | 60–120 characters | 200 characters | Displayed below form fields |
| Error message | 40–100 characters | 150 characters | Must include how to fix the error |
| Placeholder text | 20–40 characters | 60 characters | Example format or brief hint |
| Info banner | 80–200 characters | 300 characters | Contextual information blocks |
| Empty state text | 60–150 characters | 250 characters | Guides users to take action |
UX Writing Principles for Help Text
- Be specific: "Enter your 10-digit phone number" is better than "Enter your phone number"
- Use positive framing: "Password must include a number" instead of "Password cannot be all letters"
- Write for scanning: Users do not read help text carefully — they scan for keywords
- Avoid jargon: Use the simplest language that accurately conveys the meaning
Tooltip Design Patterns
Tooltips appear on hover (desktop) or tap (mobile) and should disappear when the trigger is removed. Key design considerations:
- Display within 200ms of hover to feel responsive
- Position to avoid obscuring related content
- Use a maximum width of 250px to prevent overly wide tooltips
- Ensure sufficient contrast between tooltip text and background
Accessibility Considerations
Help text must be accessible to all users, including those using screen readers and keyboard navigation:
- Associate help text with form fields using
aria-describedby - Ensure tooltips are keyboard-accessible (triggered by focus, not just hover)
- Do not rely solely on color to convey meaning in error states
- Provide sufficient time for users to read tooltip content
Platform-Specific Guidelines
| Platform | Tooltip Max | Notes |
|---|---|---|
| Material Design (Google) | 80 characters | Single line preferred |
| Apple HIG | 150 characters | Brief, informative |
| Microsoft Fluent | 80 characters | Action-oriented |
Conclusion
Effective tooltips and help text are concise, specific, and accessible. Keep tooltips under 80 characters and help text under 120 for optimal readability. Use Character Counter to verify your microcopy lengths during the design process.