For the purpose of this document, tooltips and infotips are the same 

Usage & Behaviour

General guidelines

Content

• 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 header, icons, dynamic content, tables Etc... . 

  • For the purpose of this page we'll just use the term tooltips

Examples:

Component
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)

Text

• When 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

See examples in table

Format

Preferred usage for tooltip is to use a small "triangle" at the outline to point mouse cursor.

Triangle position should be dynamic and point the location of the tooltip in relation to the mouse cursor and screen edges/limitations. 

See examples:

<<TBD picture of "triangle" options>>. 

Placement or Positioning

• Position of tooltip should be where mouse cursor last position see <<Interaction below>>
• Avoid using the tooltip covering an element the user will interact with.
  For example:
  <TBD - replace picture with LUX - should be horizontal>>
  
• 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>>
  

Interaction

The following steps describe how should the tooltip be presented according to user behavior and context

Regular (e.g. truncation of any sort):

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, show tooltip after 0.1 seconds
4. Keep displaying the exposed content element until the cursor has left the target area or 12 seconds had passed

Graph micro chart or icon with no label: <<Do we need that distinction>>

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)
3. Keep displaying the exposed content element until the cursor has left the target area or 12 seconds had passed

Tooltips on graphs may sometimes add additional graphical elements to help the user focus on the visual.

See example in Queue Analytics where a vertical line is added with tooltip to help maintain focus of hour:

Best practices

• 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

<<In general each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>

Contrast & size compliance

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Design