Tooltip Preview
A tooltip provides supplemental, contextual information elevated near its target component.
Tooltips should be used to provide helpful but non-essential, plaintext information. Don't use them to communicate system feedback. If you need to deliver robust, formatted information, use a popover instead.
Resources
Behavior
Tooltips are triggered on hover or focus of the target component and dismissed on blur or mouse-out of the target or tooltip container.
Layout
By default, tooltips are placed 4 pixels away from their target element on hover or focus. Adjust the tooltip’s placement using system spacing tokens to ensure the tooltip doesn’t obscure important information. The optional arrow should always point to the target element.
In busy layouts, consider using an info button to indicate there’s more information within a tooltip.
Accessibility
For screen reader users, connect tooltips to their target element with an id attribute and aria-describedby.
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.
For enabled components that could use some explanation, tooltips should describe what the component lets someone do, i.e. “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 control. Only use periods for complete sentences.
