| Table of Contents | ||||
|---|---|---|---|---|
| outline | true | |||
| Table of Contents | ||||
|
Description
Tooltips are small text like bubbles that appear when the user hovers an element.
...
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) |  | ||||||
...
When the tooltip is applied to buttons, use user action-oriented copy that communicates the value in a straight forward manner.
See examples in the 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 |
Placement or Positioning
Preferred usage for a tooltip is with a small "triangle" at the outline to point mouse cursor (when technically feasible).
See examples:
...
Positioning
Position The position of the tooltip should be where the mouse cursor last position. 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:
Interaction
Tooltip presentation
...
Mouse cursor enters the target area: display visual feedback of hover within 0.1 seconds..
If cursor remains stationary within the target area for 1.5 seconds,
Display tooltip on the location of the cursor currently within the target area (position of tooltip doesn't change while the 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 the new target after 0.1 seconds
Keep displaying the tooltip until the cursor has left the target area for 12 seconds or unlimited depending on the content complexity
Once the cursor left the target area close the tooltip after 0.1 seconds
Graph or micro chart
Usually It usually requires more quick response presenting the information.
Mouse cursor enters the target area: display visual feedback of hover within 0.1 seconds..
If cursor remains stationary within the target area for 0.7 seconds
<Continue as regular or tooltip>
...
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)
Try to avoid tooltip with actions in them
Use A formatted structure is easier to read than big chunk (see in additional examples under Content)
...
Don’t use:
If you reach more than 250 chars, reconsider the tooltip and use a pop-overTry to avoid tooltip with actions in them
Tooltips should be informative and should not just not be used as the only way to accomplish a task (should not be vital for the task)
Just repeat what is already on the screen (i.e. redundant)
Transition
Tooltip The tooltip should appear with an animated transition and not at once
...