Tooltip

Backed by Radix Tooltip. Aligned with J&J DS v1.2 (Figma 11378:70523). Plain mode (default) for short text labels; rich mode (heading + body + optional action + close X) when supplying any of heading, action, or dismissible.

Plain text tooltip

A single line of body copy. Supports the four sides via `side`.

Show source

<Tooltip content="Provides contextual help" side="top">
  <Button variant="ghost" size="iconMd" aria-label="Help">
    <Icon icon={HelpCircle} size="sm" />
  </Button>
</Tooltip>

Rich — heading + body

Pass a `heading` to upgrade to the rich layout. Body is rendered in text-inverse-02 below.

Show source

<Tooltip
  heading="Tooltip heading"
  content="Tooltip text goes here. Excepteur sint occaecat cupidatat non proident."
>
  <Icon icon={HelpCircle} size="sm" />
</Tooltip>

Rich — with action button

Add an `action` button (typically a CTA) below the body.

Show source

<Tooltip
  heading="Tooltip heading"
  content="Tooltip text goes here…"
  action={<Button size="sm" className="bg-white text-jj-text-01 hover:bg-jj-text-inverse-02">Action</Button>}
>
  <Button variant="ghost" size="iconMd" aria-label="Help"><Icon icon={HelpCircle} size="sm" /></Button>
</Tooltip>

Rich — dismissible

Add a close (X) button via `dismissible`. Best paired with `defaultOpen` for onboarding-style hints.

Show source

<Tooltip dismissible heading="Did you know?" content="…">…</Tooltip>