Overview
Trigger
Tooltips display informative text on hover, focus, or tap; from screen readers, users can trigger a tooltip by pressing Enter or Space. They appear over all other elements on a page and provide that extra ability to communicate and give clarity.
When to use
- Sparingly, to give nonessential information
- Define a term, an inline item, or a single action
- Describe icon buttons
- To explain or call attention to a new feature (first use only, onboarding tooltip only)
When not to use
- To explain several things at once (ex: 2 or more concepts in one generic UI tooltip, or 2 or more steps in an walk-through tooltip)
- For marketing purposes
- If you need to include an interactive elements within a generic UI tooltip
Types
Generic UI tooltip
Generic UI tooltips should add context and be helpful, but they should also be nonessential. If the information you’re putting on a tooltip is key or blocks the user from moving forward, consider embedding it on the page.
Copy guidelines
- Sentence case
- Keep as short as possible. Recommended: no more than 3 lines or 78 characters.
- Clear, concise, transparent wording in active voice.
- Benefit oriented: focus on how this information impacts the user
- Add only information that’s important right now. A tooltip shouldn’t explain several things at once.
Types

Walk-through tooltip (aka Onboarding tooltip)
- Always informational and typically instructional
- Appear on page-load, in most instances
- Can be singular or multi-stepped
- Not an advertisement
Dismiss
This is the “x” on the far top-right of the tooltip.
Attributes
- A dismiss icon is available by default. Functionally, this action results in the tooltip disappearing.
- When dismissed, the tooltip does not reappear in the next session
- Dismiss icons require a tooltip title
- Always use the Icon button component in the “Small” size
Copy guidelines
- Sentence case for both titles, body copy, and buttons.
- Clear, concise, transparent wording in active voice.
- Add only information that’s important right now (avoid explaining several things at once.)
- Titles:
- 1-4 words max, one line
- Don’t repeat the copy where the tooltip is coming from (e.g.: If the tooltip comes out of Daily review tab, don’t make the title “Daily review”).
- Don’t use generic statements like “Great job!” “Oh, no...” etc.
- Body copy:
- 3 lines max, 2 preferred
- Benefit-oriented: what is the user getting out of using this? How does it impact them?
- Concrete about what happens here specifically: avoid blanket statements about “saving time” or “make x thing easier”
Actions (buttons)
- One button per tooltip (no links yet, reach out to the design system team with use cases)
- Use the term “Got it” for one-off tips and “Next > Done” for multi-step onboarding
Types


Placement
Tooltip directions by default are set to auto. Upon opening, tooltips can detect the edges of the browser to properly be placed in view so the container does not get cutoff. Tooltips can instead use specific directions and may be positioned right, left, bottom, or top to the trigger item.

Spacing
A tooltip has an internal padding of 16pxs. The distance from the source of clicking should be 8pxs.

Resources
(internal only)