| Table of Contents | ||||
|---|---|---|---|---|
|
...
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) |  | ||||
Content
When the tooltip is applied to buttons, use user action-oriented copy that communicates the value in a straight forward manner.
...
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).
...
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 The target area should include all elements to which the tooltip is pointing.
All parts of the target area should be treated as an internal target area.
...