Guidelines
When to use
- Clarify icons or elements: Use tooltips to provide additional information about icons or elements that may be unclear to the user.
- Provide brief, context-specific information: Tooltips should offer concise and informative text that explains a feature or element without overwhelming the user.
When not to use
- Disabled elements: Don’t use tooltips on disabled buttons or elements, as they are not accessible and don't provide meaningful interaction.
- Truncated text: Do not rely on tooltips to display truncated text. Instead, adjust the layout or use expandable areas to ensure content is accessible to all users.
- Critical information: Important content should always be visible and never hidden in tooltips. Depending on the content, alternative components are banners, expandable sections, and helper messages.
Tooltips provide additional context for UI elements, offering tips in a short text.
Best Practices
- Ensure that tooltips only appear when the user pauses over the target element. They should remain visible if the user briefly moves the cursor off and then back onto the target.
- Tooltips should disappear when the user scrolls away or shifts focus from the tooltip.
- Avoid incorporating links or interactive elements within tooltips, as this approach lacks accessibility and usability.
Tooltip vs. Helper text
- Tooltips: Used for brief, supplementary information that enhances understanding, such as explaining icons or features. They should disappear when the user moves the cursor away.
- Helper text: Used for essential, persistent information that supports the user in completing tasks. This ensures accessibility and is always visible.
Don't use tooltips to provide essential information, such as something that helps complete tasks.
Use the Helper text to provide persistent and accessible information instead.
Tooltip vs. Popover
- Tooltips: Tooltips provide brief, contextual information when a user hovers over an element. They should not contain interactive elements, as they lack support for focus management and accessibility features.
- Popovers: Popovers allow for displaying more detailed content and can include additional elements, such as images, buttons, or links. While they may be less discoverable in the layout, they support focus management and are more accessible, offering an enhanced experience when displaying supplementary information.
Don't add interactive elements within a tooltip. Use concise text only.
For additional interactions or content, use a Popover, as it supports focus management and is more accessible.
Content
Tooltips are all about giving just-in-time help without overwhelming the interface, so content should be ultra-clear and brief.
Keep it short and scannable
Tooltips should be a single sentence — often even just a phrase. They appear on hover or tap, so they shouldn’t slow the user down.
✅ This amount excludes taxes
🚫 Please note that the amount shown here does not include any taxes or fees.
Explain, don’t repeat
Use tooltips to clarify unfamiliar or non-obvious concepts — not to restate the label.
✅ (City tax) A local fee charged per guest, per night
🚫 (City tax) City tax
Write in sentence case with no punctuation
✅ Charged per guest, per night
🚫 Charged Per Guest, Per Night.
Do not use links or long actions
Tooltips should never contain interactive elements or ask the user to make decisions. If more help is needed, link to help content elsewhere.