label

All tooltips have a label. The label communicates the contextual help or information about specific components when a user hovers over or focuses on them.

variant

By default, tooltips are the neutral variant. These are the most common variant because most tooltips are used to only disclose additional information, without conveying a semantic meaning. The neutral variant never includes an icon.

Tooltips also come in semantic variants: informative (blue), and negative (red). An icon is required for these variants to ensure information isn't conveyed by color alone.

hasIcon

2 of the 3 tooltip variants (informative and negative) can include an icon to supplement the messaging. These icons are predefined and can not be customized. Unless it's being used to provide context about the exact same icon, a semantic tooltip should always show an icon. Doing this is essential for helping users with color vision deficiency to discern the message tone.

maxWidth

A tooltip comes with a maximum width to disclose a short message. If a larger amount of text or information needs to be disclosed, Contextual help or Help text should be considered.

placement

A tooltip is positioned in relation to its target.

shouldFlip

This option determines whether or not a tooltip should be able to switch sides when constrained by space. A tooltip placed at the top would flip to be placed at the bottom (and vice versa), and a tooltip placed at the left would flip to be placed at the right (and vice versa).

offset

The offset is the distance between the end of the tip and the target.

containerPadding

To make sure that the tooltip will stay within certain boundaries (e.g., a browser window) it's possible to define a container and a container padding value to respect.