...
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).
...
Action | Behavior |
|---|---|
Cursor moves into a target area and remains within it 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 immediately. This resets the interaction. |
Cursor is moved to another target area in less than 1 second. | Remove the current tooltip and show the tooltip for the new target area immediately. |
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.
...
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
...
Responsive design
Verint products should dynamically respond to the user’s screen size, platform, and orientation, supporting support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.
Tooltip behavior depends on the platform and access method being used.
...