| Table of Contents | ||||
|---|---|---|---|---|
|
| Status | ||||||
|---|---|---|---|---|---|---|
|
Tooltips are small text like bubbles that appear when the user hovers an element.
...
- Most tooltips contain plain text which usually describes the control/object they point to.
- Content cal can also be tooltips with header, icons, dynamic content, actionable buttons, links, tables Etc...
...
| 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 structured content (Queue Analytics, Forecast) |  | ||||||
| Regular with actions(e.g. buttons) |
| ||||||
Text
When the tooltip is applied to buttons, use user action-oriented copy that communicates the value in a straight forward manner
...
See examples in table
| Target area | Correct | Incorrect |
|---|---|---|
Ribbon button
| "Generate a schedule for selected employees" Rationale: explaining the main operation of the button including who it works on | "Generate schedule" Rationale: repeating the same text as the button is redundant |
Search field
| "Search within the listed tree of organisation" Rationale: explaining the main operation of the field including who it works on | "will search upon all trees of organisation excluding the dates or any other non-organisation relevant information. " Rationale: Too long, and using unnecessary information which can be understood from context of the field and screen |
...
Preferred usage for tooltip is with a small "triangle" at the outline to point mouse cursor (when technically feasible). Triangle position should be dynamic and point the location of the tooltip in relation to the mouse cursor and screen edges/limitations.
See examples:
Placement or Positioning
- Position of tooltip should be where mouse cursor last position see . See Interaction section
- Usually to the right (in LTR and below of the target area.
- Avoid using the tooltip covering an element the user will interact with.
For example:
Avoid using the tooltip on top of another element when items seemed to be arranged as groups
Interaction
Tooltip presentation
The following steps describe how should the tooltip be presented according to user behavior and context
...
- 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, remove current tooltip and show tooltip for new target after 0.1 seconds
- Keep displaying the exposed content element until tooltip until the cursor has left the target area or for 12 seconds had passedor unlimited depending on the content complexity
- Once the cursor left the target area close the tooltip after 0.1 seconds
...
Usually require more quick response presenting information. See example below.
- Mouse cursor enters target area: display visual feedback of hover within 0.1 seconds..
- If cursor remains stationary within target area for 0.27 seconds
- <<Continue <Continue as regular or tooltip>>tooltip>
For example:
Tooltips with action
Follow the same Regular tooltip interaction with the following changes
- While the mouse cursor is on the target area OR tooltip area, keep displaying the tooltip
- Once the cursor left the target AND tooltip area, close the tooltip after 1 seconds
Target area
Target area should include all elements to which the tooltip is pointing.
The following example is an incorrect behavior where different All parts of the target area are should be treated as internal target area.
A video example of an incorrect behaviour:
- Notice how the tooltip changes position within the same component on different elements such as Icon, label, and dropdown arrow)
View file name Screen Recording 2019-07-28 at 11.58.44.mov height 250
General
- 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.
...
- 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)
- Keep it short - If you reach more than 250 chars, reconsider the tooltip and use a pop-over
- Try to avoid tooltip with actions in them
Transition
<<TBD>>
Accessibility compliance
Focus management
...