Overview
Tooltips provide additional, nonessential information on hover or focus to provide clarity to the user. A tooltip is triggered by a UI element such as a button to provide more information to a user.
When to Use
Tooltips should be used sparingly and succinctly and with a specific purpose. Use to provide more context or explanation, such as defining a term or inline item.
Do not use tooltips for information for a user to complete their task, and do not use interactive elements within a tooltip.
Formatting
Anatomy
- Interactive trigger button
- Tooltip container
- Body copy
Content
Main Elements
Interactive Trigger Button
A tooltip is controlled by a trigger button. An interactive element must trigger the tooltip to open on hover or focus. This interactive element is a button by function but can visually change its shape and size depending on the use case. The icon button is a common example of a tooltip trigger button.
The tooltip is positioned by default in the center. The tooltip can also be positioned dynamically to keep the container from bleeding off the page or covering important information.
Placement
There should be 4px of padding between the trigger button and the tooltip and 4px of spacing in all orientations. The tooltip is positioned below the trigger button by default, but can be set to be placed to the left, right, or top as well. Do not cover related content that is essential to the user’s tasks. Tooltips should not bleed off page or behind other content.
