Delphi Design

A tooltip component for displaying helpful hints.

Default

Basic Tooltip

Usage

import {
  Tooltip,
  TooltipProvider,
  TooltipTrigger,
  TooltipContent,
  Button
} from "@delphi/ui";

export function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button>Hover</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Helpful information</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

API Reference

Prop	Type	Default	Description
`delayDuration`	`number`	`400`	Delay in ms before tooltip appears
`skipDelayDuration`	`number`	`300`	Time to skip delay when moving between tooltips

TooltipContent Props

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`	Preferred side for tooltip
`sideOffset`	`number`	`4`	Distance from trigger
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to trigger

Wrap your app in a single TooltipProvider for consistent behavior

Use tooltips for brief, supplementary information

Keep tooltip content concise — 1-2 short sentences max

Use asChild on TooltipTrigger to preserve semantic elements

Ensure tooltips are accessible via keyboard focus

Put essential information only in tooltips — some users can't access them

Include interactive elements inside tooltips — use Popover instead

Make tooltips appear on click — they should appear on hover/focus

Use tooltips for form validation messages