...
Component | Regular size | Small size |
|---|---|---|
Regular |  |  |
Regular with heading |  | |
Error See Field Validation |  |  |
Warning see Field Validation |  |  |
Informative |  |  |
Help |  |  |
Additional examples | ||
Regular with dynamic content |   | |
Regular with structured content |   | |
The preferred presentation of a tooltip is with a small triangle near the cursor point, where technically feasible. Examples:
 |  |
 |  |
Placement and Positioning
...
Target area | Correct | Incorrect |
|---|---|---|
 | "Generate a schedule for selected employees" Explains the main operation of the button, and what it will be applied to. | "Generate schedule" Only repeats the button text without further information, which is redundant. |
| "Search within the tree of the organisationorganization" Explains the main operation of the element, including the information it relates to. | "Will search all trees of the organisation organization excluding dates or any other information not relevant to the organisationorganization." The text is too long, and includes unnecessary information which can be understood from the element’s context. |
...
Action | Behavior |
|---|---|
Cursor is first moved into the target area. | Display visual feedback of hover within 0.1 seconds. (See the States section for each component). |
Cursor remains stationary within the target area for 1.5 seconds (including the loadings time of the content). | Display tooltip. The tooltip should not move with the cursor while it remains within the target area. |
Cursor leaves the target area, without moving to another target area. | Close the tooltip after 0.1 seconds. This resets the interaction. |
Cursor is moved to another target area in less than 1 second. | Remove the current tooltip. |
Cursor remains within the same target area. | For standard content, continue to show the tooltip for 12 seconds. |
Graphs and micro charts
...
 |
Graphs and charts usually requires a quicker response to present the information.
...
A video example of incorrect behavior:
...
Incorrect | Correct |
|---|---|
 |  |
Notice how the tooltip position changes as the mouse cursor moves over different parts of the elements, such as the icon, label, and drop-down arrow.
...
Tooltips on graphs may sometimes add additional graphical elements, to help the user to visualize and interact with the data.
See the Queue Analytics example, where a vertical line has been added with the tooltip to highlight the hour:
  |
Using Esc. on the keyboard should hide the tooltip while the mouse cursor is still within the target area. Leaving the target area should reset the interaction, as explained above.
...
An animated transition should be used when the tooltip appears. See video:
...
 |
Accessibility compliance
Focus management
...