Tooltip
Tooltips provide additional information or context about an element when a user hovers over, clicks on, or focuses on that element. They should enhance user understanding without cluttering the interface.
API Reference
| Prop | Type | Default |
|---|---|---|
visible | boolean | false |
enterDelay | number | 500 |
exitDelay | number | 500 |
position | PositionTypes | top |
Usage
General Guidelines
Do's
- Use tooltips to clarify icons, buttons, links, or other UI elements.
- Keep the text concise and relevant to the element.
- Ensure the tooltip is easily accessible and readable.
- Position the tooltip close to the element it describes.
- Use consistent styling and placement throughout the application.
- Provide helpful information that aids in user decision-making.
Don'ts
- Avoid using tooltips for essential information that users need to complete tasks.
- Don’t overload the tooltip with too much text or complex information.
- Avoid placing tooltips in a way that covers other important UI elements.
- Don’t rely on tooltips as the sole method of providing critical instructions or information.
- Avoid using tooltips for non-interactive elements.
Writing Guidelines
When to use
- When users might need additional context about an icon, button, or link.
- To provide brief explanations for form fields, especially those with complex or non-obvious purposes.
- To offer supplementary information without cluttering the main interface.
When not to use
- For information that is critical for task completion; such information should be visible on the main interface.
- When the tooltip content is too lengthy or detailed.
- If the tooltip might interfere with the usability of other interface elements.
- In cases where users need to keep the information visible for reference while performing tasks.
Use Case
General Use Cases
- Explaining the function of icons and buttons to improve user understanding.
- Offering brief explanations for form fields, especially those with complex or non-obvious purposes.
- Providing supplementary information for elements without cluttering the main interface.
- Offering helpful tips or guidance for using specific features or elements within the application.
Digital Health Use Cases
- Providing definitions or explanations for medical terms to aid patient understanding.
- Offering additional information about data fields, helping users input accurate and relevant information.
- Giving tips for using health-related tools and features, such as how to correctly fill out health forms or use monitoring devices.
- Assisting patients in navigating telemedicine platforms by explaining interface elements and features, such as how to schedule an appointment or use video conferencing tools.
Accessibility Guidelines
- Use
aria-describedbyattribute to provide descriptive text for an element, offering additional context or explanation. - Add
aria-haspopupto indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.