| Expand | ||||||
|---|---|---|---|---|---|---|
| ||||||
|
Description
| Status | ||||||
|---|---|---|---|---|---|---|
|
Tooltips are small text like bubbles that appear when the user hovers (focuses on, or touches) an element.
...
- Most tooltips contain plain text which usually describes the control/object they point to
- Rich tooltips can contain more than just plain text such as header, icons, dynamic content, tables Etc... .
For the purpose of this page we'll just use the term tooltips
Examples:
| Component | Regular size | ||||||
|---|---|---|---|---|---|---|---|
| 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) |  | ||||||
...
- Mouse cursor enters target area: display visual feedback of hover within 0.1 seconds..
- If cursor remains stationary within target area for 1.5 seconds,
- Display tooltip on location of the cursor currently within target area (position of tooltip doesn't change while cursor is inside target area)
- If cursor had moved to another target area in less than 1 second, show tooltip after 0.1 seconds
- Keep displaying the exposed content element until the cursor has left the target area or 12 seconds had passed
Graph or micro chart or icon with no labelchart: 
<<Do <<Do we need that distinction>>distinction>>
- Mouse cursor enters target area: display visual feedback of hover within 0.1 seconds..
- If cursor remains stationary within target area for 0.2 seconds,
- Display tooltip on location of the cursor currently within target area (position of tooltip doesn't change while cursor is inside target area)
- Keep displaying the exposed content element until the cursor has left the target area or 12 seconds had passed
...
- Tooltips on graphs may sometimes add additional graphical elements to help the user focus on the visual.
See example in Queue Analytics where a vertical line is added with tooltip to help maintain focus of hour:
- Using "Esc" on the keyboard should hide the tooltip while the mouse cursor is still within the target area. Getting out of the target area, should reset the interaction as explained above.
Best practices
- 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
...