Design
Web component
Is documented
Status
Healthy
Figma component
Principles
Use when
- there is a need to briefly provide additional information about a related action, especially if the action requires further explanation.
- on UI elements that have a disabled state, explain why the component is in the disabled state.
Don't use when
- if you want to convey general information across the layout. Instead, use notifications.
Structure
- Tooltip label
- Action button (optional)
- Redirecting link
Properties
Types
Short
A short tooltip can be used when there is a need for icon buttons to indicate their action and provide other informational details for UI elements such as buttons and helper text.
Brief
A brief tooltip is needed when more clarification is required for a state where something has occured.
Interactive
An interactive tooltip is used to describe a situation in which a redirection or there is an external source, including a link component.
Content
Provide a clear and direct description of the action or situation.
While using the short tooltip, keep it concise. Use verbs or objects if they will be helpful.
Also, while using an interactive tooltip, keep the sentences one sentence long.