...
Correct | Incorrect |
|---|---|
 |  |
Content
When applied to Buttons, tooltips should include a short and clear description of the action the user can perform. For example:
...
General interaction guidelines
Action | Behavior | ||
|---|---|---|---|
Cursor is first moved moves 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 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 after 0.1 secondsimmediately. 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. |
...
If your content is longer than 250 chars → use a Popover.
To show vital options. Using a tooltip should not be the only way to accomplish a task.
To just repeat what is already on the screen. Tooltips should provide additional information.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focusing on an element which has a tooltip should:
...