Components
Tooltip
A tooltip is a small, contextual pop-up that appears when a user hovers over or focuses on an element. It provides brief, supplementary information that helps clarify an element's function or meaning without cluttering the interface.
When to use
Labeling icon-only controls
Use a tooltip to reveal the function of an icon-only button (e.g., a gear icon with a "Settings" tooltip).
Labeling icon-only controls
Use a tooltip to reveal the function of an icon-only button (e.g., a gear icon with a "Settings" tooltip).
Labeling icon-only controls
Use a tooltip to reveal the function of an icon-only button (e.g., a gear icon with a "Settings" tooltip).
Displaying truncated text
Show the full text when a piece of text in the UI has been truncated with an ellipsis.
Displaying truncated text
Show the full text when a piece of text in the UI has been truncated with an ellipsis.
Displaying truncated text
Show the full text when a piece of text in the UI has been truncated with an ellipsis.
Providing context
Offer short, helpful clarifications for charts, data points, or form fields where a permanent label is not necessary.
Providing context
Offer short, helpful clarifications for charts, data points, or form fields where a permanent label is not necessary.
Providing context
Offer short, helpful clarifications for charts, data points, or form fields where a permanent label is not necessary.
When to avoid
Critical information
Never place essential information that a user must see to complete their task inside a tooltip. Content should be supplementary.
Critical information
Never place essential information that a user must see to complete their task inside a tooltip. Content should be supplementary.
Critical information
Never place essential information that a user must see to complete their task inside a tooltip. Content should be supplementary.
Interactive content
Avoid placing interactive elements like links, inputs, or buttons inside a tooltip. For interactive pop-ups, use a popover component.
Interactive content
Avoid placing interactive elements like links, inputs, or buttons inside a tooltip. For interactive pop-ups, use a popover component.
Interactive content
Avoid placing interactive elements like links, inputs, or buttons inside a tooltip. For interactive pop-ups, use a popover component.
Touch devices
Tooltips are primarily a desktop pattern triggered by hover. They are difficult to use on mobile and other touch-based devices. Consider alternative patterns like a bottom sheet or a toggleable info icon for these contexts.
Touch devices
Tooltips are primarily a desktop pattern triggered by hover. They are difficult to use on mobile and other touch-based devices. Consider alternative patterns like a bottom sheet or a toggleable info icon for these contexts.
Touch devices
Tooltips are primarily a desktop pattern triggered by hover. They are difficult to use on mobile and other touch-based devices. Consider alternative patterns like a bottom sheet or a toggleable info icon for these contexts.
Long content
Keep tooltip text very brief and scannable. If the information is lengthy or complex, it belongs in a more persistent element like a modal or a dedicated section of the page.
Long content
Keep tooltip text very brief and scannable. If the information is lengthy or complex, it belongs in a more persistent element like a modal or a dedicated section of the page.
Long content
Keep tooltip text very brief and scannable. If the information is lengthy or complex, it belongs in a more persistent element like a modal or a dedicated section of the page.
Specifications
Position
Top
Left
Right
Bottom
Top
Left
Right
Bottom
Top
Left
Right
Bottom
Top
Left
Right
Bottom
Beak alignment
Start
Middle
End
Start
Middle
End
Start
Middle
End
Content
Text
Displays a simple, plain text string.
Custom
Allows for embedding a custom component or a more complex layout within the tooltip.
Text
Displays a simple, plain text string.
Custom
Allows for embedding a custom component or a more complex layout within the tooltip.
Text
Displays a simple, plain text string.
Custom
Allows for embedding a custom component or a more complex layout within the tooltip.
Text
Displays a simple, plain text string.
Custom
Allows for embedding a custom component or a more complex layout within the tooltip.
Anatomy
1
Content
A flexible slot designed for brief, supplementary text or custom content that provides non-essential clarification about an interface element.
2
Beak
A small caret that visually connects the tooltip to its trigger element and can be positioned on any side of the content area via the position prop.
Value
Tooltip
Tooltip