This is an open space for collaborating on a tooltip pattern. To join in the conversation please add a comment below.
Your feedback is greatly appreciated and will help identify any areas of improvement. Let us know what you like about it, what you would change or any other suggestions you may have.
A tooltip is a brief, informative message that appears when a user interacts with an element.
When to use tooltips
Use tooltips on inline text elements that appear in the main content of the page to:
- Provide more context or brief explanations for technical or industry-specific terms
- Describe acronyms or abbreviations
Tooltips should provide concise additional information for inline elements in the main content area of the page only.
- Use to display vital information
- Use on non-text elements such as icons, images, buttons or form fields
Types of tooltips
- Default - Text only content, displayed on hover
- Toggle-Tip - When links are included in the content, displayed on click.
By default the tooltip content is set to display above the trigger on larger screens.
For smaller screens the placement of the tooltip content is relative to the position of the inline element (the tooltip trigger) and the viewport.
Tooltip trigger styling
The tooltip trigger has a dotted underline and is an inline text element which is used to activate the tooltip content - either on hover or on click (depending on the type being used, see ‘Types of tooltips’ above).
Cursor styling on hover
- ‘Help info’ cursor for text only content
- ‘Pointer’ cursor(same as the one used for regular links), when links are included in the content.