Guidelines
Guidelines
Usage
A Tooltip should:
- Be used only when it’s necessary to provide more information for an interface element. The Tooltip should not repeat the target’s content.
- Only have one Tooltip open at a time.
- Should not have any delay when it appears and disappears.
- Be temporary.
- By default be placed on the top center of the target when there’s enough space. Otherwise, it should be placed on the side that has space for it.
- Be placed 8 pixels away from the edge of the Tooltip target.
Appearance
A Tooltip should:
- By default be using the 'light' appearance .
- Use a 'dark' appearance for a more subtle presentation.
Spacing
A Tooltip should:
- Have itsspacing be set to 'tight' by default.
- Have its spacing set to 'loose' for housing larger pieces of content.
Content
A Tooltip should:
- Tooltips should not contain critical information to interface usages, like errors or other important info.
- Have its content written in sentence-case.
- Have its width be a maximum of 60 characters to not make it appear too large.
- Not have content that needs to be scrolled.
Accessibility
A Tooltip should:
- Be available on cursor-based devices on hover. Using Tooltip on a touch device can significantly hinder the efficiency of an interface by blocking content or requiring users to click touch targets twice or more.
- Be displayed when its target gains focus using assistive technologies. When a Tooltip is opened focus should be set to its content.