...
Tooltips are small text bubbles that appear when the user hovers over an element.
 |
(For the purpose of this document, tooltips and infotips are the same).
...
Examples:
Component | Regular size | With Triangle | 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 |  | ||
...
Tooltips should appear adjacent to the mouse cursor. This is usually below and to the right of the cursor (except for with right-to-left languages, where the tooltip may appear to the left instead).
The tooltip should not move with the mouse cursor while it remains within the target area. See the Interaction section below.
The tooltip should not cover the element it relates to, which the user may need to interact with. For example:
Correct | Incorrect |
|---|---|
 |  |
Content
When applied to Buttons, tooltips should include a short and clear description of the action the user can perform. For example:
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 organization" Explains the main operation of the element, including the information it relates to. | "Will search all trees of the organization excluding dates or any other information not relevant to the organization." 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.
...