Tooltips

Tooltips are user-triggered messages that provide short explanation, a hint about a page element or feature

Tooltips are meant to clarify or help users use the content they hover over, not add additional content.

 

Anatomy

  1. UI trigger button: Icons that triggers a tooltip on hover or focus.
  2. Tip: Closely associates the container with the related trigger element.
  3. Container: Contains text, which should use typography-paragraph-small and color-base-100.

Component Health

Component checklist

Is documented

The component is fully documented

Figma component

Includes a link to a Figma component that has been imported to Supernova

Open in Figma

Status

The component has a health status indicated

Healthy

Repository

Includes a link to an external code repository

Open link