Tooltip Preview
A tooltip provides supplemental, contextual information without shifting people’s focus away from the primary interface. Use them to give helpful but non-essential plain text hints.
Tooltips are especially helpful for teaching someone how to use your app. If you need to provide a list of actions, try a popup menu. If you need to let someone know the status of the system or a task, try a banner or toast notification.
Resources
Behavior
Automatic triggers
Tooltips can be configured to programatically show at the right time for an application’s experience or workflow, like when learning about a new feature. Avoid using too many tooltips for onboarding to your app if it will make the experience feel busy. Try a more focused approach instead.
Manual triggers
Put additional context in tooltips for people to open when they need them. When using tooltips with manual triggers, make sure to include an additional element in the UI that signifies there’s more information to discover, like an info icon or a “Learn more” link.
Dismissal
A tooltip is typically dismissed when someone taps away from it. Tooltips can also be configured to dismiss by tapping on the tooltip itself or on the element the tooltip is anchored to. If the default dismissal configuration is changed, make sure to let people know how to exit the tooltip.
Layout
One at a time
Tooltips are meant to give additional info without distracting too much from the original context. Only one tooltip can be shown at a time. If a second tooltip is triggered, the first tooltip will be dismissed. Be sure to use tooltips that are small enough so that they don’t take over the screen.
Positioning
By default, tooltips are placed adjacent to their target element when they’re triggered. Adjust the tooltip’s placement using system spacing tokens to ensure the tooltip doesn’t obscure important information. The tip should always point to the target element. It can be centered on the tooltip or offset to best accommodate your layout.
Content
Use tooltips to provide additional—not redundant—information. Limit the content in a tooltip to just the essentials. If a component is unlabeled, use a simple descriptive noun phrase in sentence case with no end punctuation. If a title is required for your scenario, the title should communicate the main message.
For enabled components that could use some explanation, tooltips should describe what the component lets someone do, for example “Find text in this file.” Don’t use end punctuation unless there’s at least one full sentence. For disabled components, tooltips should provide the circumstances that can enable the component. Only use periods for complete sentences.
