Specifications
- Icon tooltips and interactive tooltips may be positioned top, bottom, left, or right to the trigger item.
- Top and bottom pointers can be positioned (in addition to center) from left or right. The pointer is then placed relatively 16px from the edge of the tooltip. Non-centered pointer is used, for example, when a tooltip points to a control placed at the edge of the screen.
- The container of the tooltip text may be aligned to start, center or end.
- Do not make the tooltip larger than the element it appears from.
- Tooltips should have a 350ms before appearing.
Colors
| Element | Property | Color |
|---|---|---|
| Tooltip | Text |
White
Trimble Gray
#ffffff
#252a2e
|
| Background |
Gray 7
Gray 0
#585c65
#e0e1e9
|
Behaviors
- Icon tooltips appear on hover and focus.
Editorial
- Keep it brief—aim for fewer than 10 words.
- End full sentences with a period. Using “&” is OK. No “!”.
- For brevity, don’t spell out numbers: Use 12, not twelve.
- Use tooltips to present small amounts of data. Tooltips are similar to toasts, or micro-conclusions, which give the user a short confirmation.
- Use the past tense rather than present perfect (was submitted vs. has been submitted). We avoid the past perfect tense because it lacks clarity for translators.
- Use sentence case for tooltips.
- Never add a link to text in a tooltip.