Tooltip

Status

Component checklist

Key points

• Tooltips are triggered by an icon button, which should be within close proximity to the content the tooltip is supporting
• Tooltips should only contain text — ideally, only a few sentences
• Tooltips are triggered on hover or by being tapped on touch devices
• Tooltips can be displayed in multiple orientations (top, right, bottom, left)
• Tooltips can be installed on the base and inverted surfaces
• The width of the tooltip can be adjusted, but should not exceed the maximum line-length limit
• In general, Compound discourages the use of tooltips — surface important text directly for the user instead
• Tooltips should not be used within forms

Use tooltips sparingly to provide brief, supplementary information that is not essential to completing a task.

File Links