Tooltip

Tooltips provide short contextual information on hover (mouse) or focus (keyboard). They should never contain critical information or interactive controls.

Default Tooltip

Enterprise default: opens on hover (mouse only) and focus (keyboard), closes on blur/leave and Escape.

Show code

import { Tooltip } from "@/design-system/components/Tooltip";
import { Button } from "@/design-system/components/Button";

export function Example() {
  return (
    <Tooltip content="This action affects billing rules.">
      <Button variant="ghost">Hover or focus me</Button>
    </Tooltip>
  );
}

All Directions

Top, Right, Bottom, Left placements. Tooltip uses portal + fixed positioning so it won't be clipped by Cards or overflow containers.

Show code

import { Tooltip } from "@/design-system/components/Tooltip";
import { Button } from "@/design-system/components/Button";

export function Example() {
  return (
    <div className="tooltips-directions">
      <Tooltip placement="top" content="Top tooltip">
        <Button variant="outline" size="sm">Top</Button>
      </Tooltip>

      <Tooltip placement="right" content="Right tooltip">
        <Button variant="outline" size="sm">Right</Button>
      </Tooltip>

      <Tooltip placement="bottom" content="Bottom tooltip">
        <Button variant="outline" size="sm">Bottom</Button>
      </Tooltip>

      <Tooltip placement="left" content="Left tooltip">
        <Button variant="outline" size="sm">Left</Button>
      </Tooltip>
    </div>
  );
}

Colors (Tones)

Tones drive the subtle accent ring/border so tooltips stay consistent with the system semantics.

Show code

import { Tooltip } from "@/design-system/components/Tooltip";
import { Button } from "@/design-system/components/Button";

export function Example() {
  return (
    <div className="tooltips-grid">
      <Tooltip tone="primary" content="Primary tone tooltip">
        <Button variant="primary" size="sm">Primary</Button>
      </Tooltip>

      <Tooltip tone="success" content="Success tone tooltip">
        <Button variant="success" size="sm">Success</Button>
      </Tooltip>

      <Tooltip tone="warning" content="Warning tone tooltip">
        <Button variant="warning" size="sm">Warning</Button>
      </Tooltip>

      <Tooltip tone="danger" content="Danger tone tooltip">
        <Button variant="danger" size="sm">Danger</Button>
      </Tooltip>

      <Tooltip tone="neutral" content="Neutral tone tooltip">
        <Button variant="neutral" size="sm">Neutral</Button>
      </Tooltip>
    </div>
  );
}

Premium Variants

Inverse (default), Surface, Glass, and Neumorphic variants — all token-driven and theme-safe.

Show code

import { Tooltip } from "@/design-system/components/Tooltip";
import { Button } from "@/design-system/components/Button";

export function Example() {
  return (
    <div className="tooltips-row">
      <Tooltip variant="inverse" content="Inverse (default)">
        <Button variant="outline" size="sm">Inverse</Button>
      </Tooltip>

      <Tooltip variant="surface" content="Surface">
        <Button variant="outline" size="sm">Surface</Button>
      </Tooltip>

      <Tooltip variant="glass" content="Glass">
        <Button variant="outline" size="sm">Glass</Button>
      </Tooltip>

      <Tooltip variant="neumorphic" content="Neumorphic">
        <Button variant="outline" size="sm">Neumorphic</Button>
      </Tooltip>
    </div>
  );
}

Usage Guidelines

Use tooltips for supplemental information only.
Do not place interactive content inside tooltips.
Ensure tooltips are keyboard accessible (focus triggers tooltip).
Avoid relying on tooltips for required instructions in workflows.
Prefer helper text for forms; use tooltips for short clarifications.

Implementation detail: tooltips are portaled to document.body and positioned with fixed coordinates, so they remain stable in complex layouts and are not clipped by overflow containers.

import { Tooltip } from "@/design-system/components/Tooltip"; import { Button } from "@/design-system/components/Button"; export function Example() { return ( <Tooltip content="This action affects billing rules."> <Button variant="ghost">Hover or focus me</Button> </Tooltip> ); }

import { Tooltip } from "@/design-system/components/Tooltip"; import { Button } from "@/design-system/components/Button"; export function Example() { return ( <div className="tooltips-directions"> <Tooltip placement="top" content="Top tooltip"> <Button variant="outline" size="sm">Top</Button> </Tooltip> <Tooltip placement="right" content="Right tooltip"> <Button variant="outline" size="sm">Right</Button> </Tooltip> <Tooltip placement="bottom" content="Bottom tooltip"> <Button variant="outline" size="sm">Bottom</Button> </Tooltip> <Tooltip placement="left" content="Left tooltip"> <Button variant="outline" size="sm">Left</Button> </Tooltip> </div> ); }

import { Tooltip } from "@/design-system/components/Tooltip"; import { Button } from "@/design-system/components/Button"; export function Example() { return ( <div className="tooltips-grid"> <Tooltip tone="primary" content="Primary tone tooltip"> <Button variant="primary" size="sm">Primary</Button> </Tooltip> <Tooltip tone="success" content="Success tone tooltip"> <Button variant="success" size="sm">Success</Button> </Tooltip> <Tooltip tone="warning" content="Warning tone tooltip"> <Button variant="warning" size="sm">Warning</Button> </Tooltip> <Tooltip tone="danger" content="Danger tone tooltip"> <Button variant="danger" size="sm">Danger</Button> </Tooltip> <Tooltip tone="neutral" content="Neutral tone tooltip"> <Button variant="neutral" size="sm">Neutral</Button> </Tooltip> </div> ); }

import { Tooltip } from "@/design-system/components/Tooltip"; import { Button } from "@/design-system/components/Button"; export function Example() { return ( <div className="tooltips-row"> <Tooltip variant="inverse" content="Inverse (default)"> <Button variant="outline" size="sm">Inverse</Button> </Tooltip> <Tooltip variant="surface" content="Surface"> <Button variant="outline" size="sm">Surface</Button> </Tooltip> <Tooltip variant="glass" content="Glass"> <Button variant="outline" size="sm">Glass</Button> </Tooltip> <Tooltip variant="neumorphic" content="Neumorphic"> <Button variant="outline" size="sm">Neumorphic</Button> </Tooltip> </div> ); }

Usage Guidelines

Use tooltips for supplemental information only.

Do not place interactive content inside tooltips.

Ensure tooltips are keyboard accessible (focus triggers tooltip).

Avoid relying on tooltips for required instructions in workflows.

Prefer helper text for forms; use tooltips for short clarifications.

Implementation detail: tooltips are portaled to document.body and positioned with fixed coordinates, so they remain stable in complex layouts and are not clipped by overflow containers.