Tooltip

A popup that displays information related to an element when the user hovers over it.

1. Import

Import the Tooltip component from the design system.

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/design-system/components/ui/tooltip"

2. Props

Tooltip component props.

Prop	Type	Default
children	ReactNode	--
delayDuration	number	700
skipDelayDuration	number	300
disableHoverableContent	boolean	false
className	string	--

3. Usages

Common Tooltip patterns and configurations.

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";

export function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger render={<Button variant="outline">Hover</Button>} />
        <TooltipContent>
          <p>Add to library</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}