| Expand | ||||||
|---|---|---|---|---|---|---|
| ||||||
|
Description
| Status | ||||||
|---|---|---|---|---|---|---|
|
Tooltips are small text like bubbles that appear when the user hovers (focuses on, or touches) an element.
For the purpose of this document, tooltips and infotips are the same
...
- Most tooltips contain plain text which usually describes the control/object they point to.
- Rich tooltips can contain more than just plain text such as headerContent cal also be tooltips with header, icons, dynamic content, tables Etc...
- Usually tooltips do not hold interactive components (links, buttons Etc.. )
Examples:
| Component | Regular size | ||||||
|---|---|---|---|---|---|---|---|
| Regular |
| ||||||
| Regular with heading |  | ||||||
Error see Field Validation |  | ||||||
Warning see Field Validation |  | ||||||
| Informative |
| ||||||
| Help |  | ||||||
| Additional examples (from different apps) | |||||||
| Regular with dynamic content (Calendar | statistics) |  | ||||||
Regular with heading - 2 lines (Calendar)
|
| ||||||
| Regular with dynamic structured content icon and list (Queue analytics) |  | ||||||
...
- When the tooltip is applied to buttons, use user action-oriented copy that communicates the value in a straight forward manner
- Keep it short. If you reach more than 150 chars reconsider the tooltip and use a pop-over <<TBD link to LUX pages>>
See examples in table
| Target area | Correct | Incorrect |
|---|---|---|
Ribbon button
| "Generate a schedule for selected employees" Rationale: explaining the main operation of the button including who it works on | "Generate schedule" Rationale: repeating the same text as the button is redundant |
Search field
| "Search |
within the listed tree of organisation" Rationale: explaining the main operation of the field including who it works on | "will search upon all trees of organisation excluding the dates or any other non-organisation relevant information. " Rationale: Too long, and using unnecessary information which can be understood from context of the field and screen |
Format
Preferred usage for tooltip is to use with a small "triangle" at the outline to point mouse cursor (when technically feasible).
Triangle position should be dynamic and point the location of the tooltip in relation to the mouse cursor and screen edges/limitations.
...
- Tooltips should not be used as the only way to accomplish a task (should not be vital for the task)
- Tooltips with obvious/redundant text are not beneficial to the user
<<TBD update image>>
- A formatted structure is easier to read than big chunk (see in additional examples under Content)
Accessibility compliance
Focus management
...