...

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 dynamic structured content icon and list (Queue analytics) Image Removed	Image Added
Regular with actions(e.g. buttons)	Image Added

Text

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

...

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

...

• 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

...