Skip to main content

Tooltip

Display additional context on hover.

Tooltips have four variants: regular (dark), light, error, and warning.

View in StorybookExternal link icon

Behavior​

  • Tooltips stay active as long as you hover over the element that activates them.
  • Tooltips can be displayed on either side of the element at the distance of 4 px.

Usage​

  • Display truncated content.

  • Display helpful context (like action names).

  • Display extra information.

Best practices​

  • For text-only tooltips, consider using regular tooltips to differenciate them from the rest of the page.