...
(For the purpose of this document, tooltips and infotips are the same).
Usage &
...
Behavior
General guidelines
Structure
Most tooltips contain plain text, which usually describes the control or element they relate to.
A tooltip may also contain a header, icons, dynamic content, actionable buttons, links, tables, action buttons (not recommended), and other content elements.
...
General interaction guidelines
Action | Behavior |
|---|---|
Cursor is first moved into the target area within 0.1 seconds. | 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
...
It Graphs and charts usually requires more quick response presenting a quicker response to present the information.
...
Action | Behavior |
|---|---|
Cursor is first moved into the target area |
...
. | Display visual feedback of hover within 0.1 seconds |
...
. |
...
Cursor remains stationary within the target area for 0.7 |
...
<Continue as regular or 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
...
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. |
Other interactions should follow the General interaction guidelines.
Tooltips with action options
Follow the General interaction guidelines, with the following exceptions:
The tooltip should continue to be shown while the cursor is in either the target area OR the tooltip area.
After the cursor leaves the target area AND the toolip area, close the tooltip after 1
...
second.
Target area
The target area should include all elements to parts of an element which the tooltip is pointingrelates to.
All parts of the target area should be treated as an internal target area.A video example of incorrect behavior:one single target area.
A video example of incorrect behavior:
Notice how the tooltip position changes position within the same component on different elements such as Iconas the cursor moves over different parts of the elements, such as the icon, label, and dropdown arrow)
...
drop-down arrow.
General
Tooltips on graphs may sometimes add additional graphical elements, to help the user focus on the visualto visualize and interact with the data.
See example in the Queue Analytics example, where a vertical line is has been added with the tooltip to help maintain focus of highlight the hour:
 |
Using "Esc" on the keyboard should hide the tooltip while the mouse cursor is still within the target area. Getting out of Leaving the target area should reset the interaction, as explained above.
Best practices
Try to avoid tooltip using tooltips with actions in them.
Use A formatted structure is easier to read than big chunk (see in additional examples under Content)short, well-structured content which is easy to read. See Content above.
Don’t use:
If you reach more your content is longer than 250 chars , reconsider the tooltip and → use a pop-overTooltips Popover.
To show vital options. Using a tooltip should not be used as the only way to accomplish a task (should not be vital for the task)Just .
To just repeat what is already on the screen (i.e. redundant). Tooltips should provide additional information.
Transition
The tooltip should appear with an animated transition and not at once
An animated transition should be used when the tooltip appears. See video:
Accessibility compliance
Focus management
We already set general guidelines described in /wiki/spaces/UX/pages/308969693Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focusing on an element with which has a tooltip should:
Display the tooltip with the same time constraints described above in Tooltips#Interaction as described in Interactions above.
Clicking Esc. should dismiss close the tooltip as described above in Tooltips#Interaction
...
in Interactions above.
Design
Zeplin link | Screen thumbnail |
|---|---|
 | |
 |
...