| Table of Contents | ||||
|---|---|---|---|---|
|
Description
Tooltips are small text like bubbles that appear when the user hovers an element.
...
Usage & Behaviour
General guidelines
...
Structure
- Most tooltips contain plain text which usually describes the control/object they point to.
- Content can also be tooltips with header, icons, dynamic content, actionable buttons, links, tables Etc...
...
| 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 structured content (Queue Analytics, Forecast) |  | ||||||
| Regular with actions(e.g. buttons) |
| ||||||
...
Content
When the tooltip is applied to buttons, use user action-oriented copy that communicates the value in a straight forward manner
...
| 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 |
...
Placement or Positioning
Preferred usage for tooltip is with a small "triangle" at the outline to point mouse cursor (when technically feasible).
See examples:
...
Positioning
- Position of tooltip should be where mouse cursor last position. See Interaction section
- Usually to the right (in LTR and below of the target area.
- Avoid using the tooltip covering an element the user will interact with.
For example:
...
- Tooltips should not be used as the only way to accomplish a task (should not be vital for the task)
- A formatted structure is easier to read than big chunk (see in additional examples under Content)
- Keep it short - If you reach more than 250 chars, reconsider the tooltip and use a pop-over
- Try to avoid tooltip with actions in them
...