| Expand | ||||||
|---|---|---|---|---|---|---|
| ||||||
|
Description
| Status | ||||||
|---|---|---|---|---|---|---|
|
Tooltips are small text like bubbles that appear when the user hovers (focuses on, or touches) an element.
...
Examples:
| Component | Regular size | Minimalsize | |||||
|---|---|---|---|---|---|---|---|
| Regular |
| ||||||
| Regular with heading |  | ||||||
Error see Field Validation |  | ||||||
Warning see Field Validation |  | ||||||
| Informative |
| ||||||
| Help |  | ||||||
| Additional examples (from different apps) | |||||||
| Regular with dynamic content (Calendar | statistics) |  | ||||||
Regular with heading - 2 lines (Calendar)
|
| ||||||
| Regular with dynamic structured content icon and list (Queue analytics) |  | ||||||
...
- Tooltips should not be used as the only way to accomplish a task (should not be vital for the task)
- Tooltips with obvious/redundant text are not beneficial to the user
<<TBD update image>>
- A formatted structure is easier to read than big chunk (see in additional examples under Content)
Accessibility compliance
Focus management
...