Use a tooltip to highlight features
Tooltips pop up to provide explanation without blocking user interactions
Tooltips are dismissed either by clicking the page, tooltip or close button, or by scrolling the page
There are two types of tooltip: simple and descriptive.
1. Simple
2. Descriptive
1. Simple, dismissible
2. Descriptive, dismissible
Usage
Use a tooltip to highlight a new or existing feature
Use a single tooltip at a time.
Do place tooltips in the content of the element you’re describing
Don’t block another navigation element with the tooltip
Writing a tooltip
- Use a single word/short description wherever possible. The ‘simple’ variant has max 16 characters including spaces.
- The descriptive variant has max 24 characters including spaces in the heading. The body shouldn’t exceed 2 lines.
- Copy should be succinct and should not truncate – select the component which best suits copy requirements
- Copy should fit within the component – you must not truncate (“...”) copy and a word must not be split across two lines. A header should not run across two lines.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v5+ |
|
Web (@ovotech/element) |
❌ |
|
App (@ovotech/element-native) |
❌ |
Related components