Tooltip
Tooltips display brief descriptive text when users hover over or focus an element, explaining its purpose without cluttering the interface.
@volvo-cars/css v2.5.1@volvo-cars/react-tooltip v0.2.3
When to use
Section titled “When to use”- Use tooltips for unlabelled UI elements such as icon buttons.
- Use tooltip sparingly and only when necessary.
When not to use
Section titled “When not to use”- Don’t use tooltips when the UI element already has label text.
- Don’t use tooltips if the explanation can’t be kept short. Use overlays instead.
- Don’t use tooltip for critical information. Instead show that directly on the page.
- Tooltips must be triggered by user action. Popups that automatically appear to showcase new features or explain functionality are not considered tooltips.
- Avoid using tooltips on touch devices – they’re not reliably accessible without hover interactions.
Content
Section titled “Content”Be concise
Section titled “Be concise”Write clear, concise tooltip text that explains the UI element’s purpose. Limit the text to 1–2 short sentences. For longer explanations, use a modal dialog instead.
When to use a period
Section titled “When to use a period”End a tooltip with a period if it’s a complete sentence or multiple sentences. Skip the period for short phrases, tool names, actions, or icon labels.
Actions or other interactive elements
Section titled “Actions or other interactive elements”Tooltips should not contain interactive elements like buttons or links. These elements are inaccessible since tooltips do not receive focus.