#Overview
A tooltip is a floating, non-actionable label used to explain a user interface element or feature. Tooltips can be attached to any interactive element (icons, text links, buttons, etc.) on a page.
#When to use
- To identify or add a small amount of information to an interactive element. For example, the meaning or purpose of icons without labels.
- To give users context as to why something is in a disabled state
#Don’t use for
- Active elements that already have a label
- Stating that a disabled element is unavailable (a tooltip should explain why it cannot be interacted with)
- Adding extra information to explain a term, such as a definition for a specification on a PDP (use a Popover)
- Stating that an action has been successful (use a Toast)
#Anatomy
#Content
Tooltips vary in width depending on their content. They have a maximum character count of 50.
The following actions are repeated throughout the shop and should always use a consistent tooltip label.
#Color
- Galaxus
- Digitec
#Spacing
A tooltip is placed 4px above an icon button and 12px above a disabled button.
#Tooltip label vs aria-label
Always include an aria-label for interactive elements, so that customers who use screen readers or other vision assistive technologies can understand and navigate the page.
The tooltip label can be different to the aria-label. For example, the aria-label may be more descriptive to assist non-sighted users. For sighted users, we should simplify the tooltip label to keep it concise.
#Placement
A tooltip is placed horizontally centred above the parent element. If the space for the tooltip is too small, it can also be shown at the bottom, left or right.
Watch out for the tooltip covering other interactive elements that interrupts the user’s flow. You may need to adjust the placement of the tooltip.
- Top (preferred placement)
- Bottom
- Left
- Right
#Best practices
#An explanation isn’t always needed
Do
Tooltips explain interactive elements.
Don't
Active elements with labels do not require additional explanation with a tooltip.
#Be explicit
Do
Tooltips describing disabled elements must clearly explain why they cannot be interacted with and guide the user on what action leads to changing this state.
Don't
Simply stating that a disabled element is unavailable fails to tell the user why they cannot interact with it.
#Keep it short
Do
Keep tooltips as short as possible.
Don't
Avoid filler words and multiple sentences.
#Keep it simple
Do
Common actions only need a single verb.
Don't
Don’t name every object that is being acted upon. An aria-label can be more descriptive to support non-sighted users.
#One at a time
Do
Only display one tooltip at a time.
Don't
Don’t display multiple tooltips at a time.
#Behavior
#Desktop
- Tooltips appear on hover or with keyboard navigation on focus.
- Tooltips appear after a delay of 500ms after the cursor enters the target area.
- Keep displaying the exposed tooltip until the cursor has left the triggering target area for longer than 500ms.
- If a tooltip is active and the user moves the cursor from one triggering target area to another, the new tooltip appears instantly.
#Mobile
- Tooltips on mobile only appear on disabled elements and are triggered with a tap.
- They appear instantly after the tap and are displayed for 3 seconds or if a tap on a different area is registered.
- There are no tooltips on mobile for interactive elements.
#Animation
- Transitions:
scale: 80% to 100%
opacity: 0% to 100%
transition-duration: 160ms
transition-timing-function: ease;