...
Most tooltips contain plain text, which usually describes the control or element they relate to.
A tooltip may also contain a header, icons, dynamic content, links, tables, action buttons (not recommended), and other content elements.
...
Component | Regular size | Small size | |||||
|---|---|---|---|---|---|---|---|
Regular |  |  | |||||
Regular with heading |  | ||||||
Error See Field Validation |  |  | |||||
Warning see Field Validation |  |  | |||||
Informative |  |  | |||||
Help |  |  | |||||
Additional examples (from different applications) | |||||||
Regular with dynamic content (Calendar | Statistics) |  | ||||||
Regular with 2 line header (Calendar) | Structured | Structured |  | Regular with structured content (Queue Analytics, Forecast) |  | ||
The preferred presentation of a tooltip is with a small triangle near the cursor point, where technically feasible. Examples:
...
Tooltips should appear adjacent to the mouse cursor. This is usually below and to the right of the cursor (except for with right-to-left (RTL) languages, where the tooltip may appear to the left instead).
The tooltip should not move with the mouse cursor while it remains within the target area. See See the Interaction below.
The tooltip should not cover the element it relates to, which the user may need to interact with. For example:
...