- Guidelines
- React API Reference
- Blazor API Reference
Tooltips provide brief, context-sensitive information that appears when a user hovers over or focuses on an element. They help users understand icons, buttons, or form fields by offering additional details without cluttering the interface.
General Guidelines
| Aspect | Best Practice |
|---|---|
| Usage | Present supplementary details or clarifications for a UI element. Tooltips appear on hover or focus and disappear when the user moves away. |
| Visual Hierarchy | Position tooltips near the related element, ensuring they don’t obstruct main content. They should feel like a natural extension, not an interruption. |
| Behavior | Triggered by hover/focus and dismissed when the user moves away. They’re non-intrusive, context-sensitive, and should enhance—not disrupt—workflow. |
| Psychological Impact | Provide on-demand information to enhance understanding without forcing navigation away or cluttering the interface. |
| Examples | Explaining an icon’s function or providing formatting guidelines for a form field. |
Format and Punctuation
- Use sentence case and proper punctuation for consistency and readability.
- Write in active voice, using simple, clear language.
- Avoid jargon; if needed, define unfamiliar terms.
- Keep tooltips concise and focused on adding genuine value.
Do’s and Don’ts
Do
- Use tooltips to clarify non-obvious functions or provide short, helpful explanations. * Keep messages brief and easy to understand.
Don't
- Present critical information that users must see to complete a task; that should be visible without interaction. * Repeat what’s already obvious from the interface.