...

• Most tooltips contain plain text which usually describes the control/object they point to.
• Content cal also be tooltips with header, icons, dynamic content, actionable buttons, links, 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) Anchor Structured Structured
Regular with structured content (Queue Analytics, Forecast)
Regular with actions(e.g. buttons)

...

• Position of tooltip should be where mouse cursor last position see <<Interaction below>>see Interaction section
• Avoid using the tooltip covering an element the user will interact with.
  For example:
  <TBD - replace picture with LUX - should be horizontal>>
  Image RemovedAvoid
  Image Added
  
  
• Avoid using the tooltip on top of another element when items seemed to be arranged as groups 
  <<TBD - replace picture with LUX  - should be horizontal>>
  Image RemovedImage Added

Interaction

Tooltip presentation

...

1. Mouse cursor enters target area: display visual feedback of hover within 0.1 seconds..
2. If cursor remains stationary within target area for 1.5 seconds,
   1. Display tooltip on location of the cursor currently within target area (position of tooltip doesn't change while cursor is inside target area)
3. If cursor had moved to another target area in less than 1 second, remove current tooltip and show tooltip for new target after 0.1 seconds
4. Keep displaying the exposed content element until the cursor has left the target area or 12 seconds had passed
   1. Once the cursor left the target area close the tooltip after 0.1 seconds 

Tooltips with action

Follow the same Regular tooltip interaction with the following changes

1. While the mouse cursor is on the target area OR tooltip area, keep displaying the tooltip
2. Once the cursor left the target AND tooltip area, close the tooltip after 1 seconds

Graph or micro chart: <<Do we need that distinction>>

...

Graph or micro chart

Usually require more quick response presenting information. See example below.

1. Mouse cursor enters target area: display visual feedback of hover within 0.1 seconds..
2. If cursor remains stationary within target area for 0.2 seconds,
   1. Display tooltip on location of the cursor currently within target area (position of tooltip doesn't change while cursor is inside target area)
   Keep displaying the exposed content element until the cursor has left the target area or 12 seconds had passed
3. <<Continue as regular or tooltip>>

Tooltips with action

Follow the same Regular tooltip interaction with the following changes

1. While the mouse cursor is on the target area OR tooltip area, keep displaying the tooltip
2. Once the cursor left the target AND tooltip area, close the tooltip after 1 seconds

Target area

Target area should include all elements to which the tooltip is pointing.
The following example is an incorrect behavior where different parts of the target area are treated as internal target area

...

• 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>>
  Image Modified
  
• A formatted structure is easier to read than big chunk (see in additional examples under Content)

Accessibility compliance

Focus management

...