Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Usage
Follow our guidelines to understand which icons require a tooltip.
Use proper loading circles
Do
Tooltips can provide a clear explanation of the action of an icon button when interacted with.
Don't
Icon buttons do not feature labels and may not be easily identifiable without an accompanying tooltip.
Be concise with text content
Do
Tooltips should be clear, informative and concise in their label descriptions.
Don't
Avoid tooltips that surpass 3-4 lines; if the label contains important information, it should not be hidden.
Keep tooltips contextual and not actionable
Do
Tooltips are informative; they should appear on hover and disappear immediately once no longer hovering.
Don't
Avoid tooltips with any actions.
When to use Tooltips vs Popovers
Do
Icon buttons, for example, benefit from the use of a tooltip for added context.
Don't
Persistent context is not required, and therefore, a popover is not needed.