Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. Built on top of Radix UI Tooltip.

Basic Usage

The simplest tooltip displays text content when hovering over the trigger element.

import { Tooltip } from '@/components'

<Tooltip content="This is a simple tooltip">
  <Button>Hover me</Button>
</Tooltip>

Directions

The direction prop controls which corner of the tooltip has a smaller border radius, creating a visual pointer toward the trigger. Available directions: top-left, top-right, bottom-left, bottom-right, and center.

<Tooltip content="Top left" direction="top-left">
  <Button>Top Left</Button>
</Tooltip>

<Tooltip content="Bottom right" direction="bottom-right">
  <Button>Bottom Right</Button>
</Tooltip>

<Tooltip content="Center" direction="center">
  <Button>Center</Button>
</Tooltip>

Large Tooltip

Large tooltips can include an icon, title, description, and an optional link. The size is auto-detected when title or description props are provided.

<Tooltip
  size="large"
  icon={<InfoCircle className="size-5" />}
  title="Feature Information"
  description="This tooltip provides detailed information about a feature."
  link={{ label: 'Learn more', href: '/docs' }}
>
  <Button>Hover for details</Button>
</Tooltip>

Large Tooltip Directions

Large tooltips also support direction variants with appropriately scaled border radius.

Dark Mode

Tooltips automatically adapt to dark mode using Tailwind's dark: prefix. Wrap the parent container with the dark class.

Custom Positioning

Override the default positioning using side and align props (passed to Radix Tooltip).

<Tooltip content="Appears on right" side="right">
  <Button>Right</Button>
</Tooltip>

<Tooltip content="Appears on bottom" side="bottom">
  <Button>Bottom</Button>
</Tooltip>

Override Radix positioning with side and align props

Delay Duration

Control how long to wait before showing the tooltip with the delayDuration prop (in milliseconds).

<Tooltip content="Instant" delayDuration={0}>
  <Button>No Delay</Button>
</Tooltip>

<Tooltip content="Slow" delayDuration={500}>
  <Button>500ms</Button>
</Tooltip>

Controlled

Use open and onOpenChange props for controlled tooltip state.

const [open, setOpen] = useState(false)

<Tooltip content="Controlled" open={open} onOpenChange={setOpen}>
  <Button>Trigger</Button>
</Tooltip>

<Button onClick={() => setOpen(!open)}>Toggle</Button>

Open state: false

Links and Actions

Large tooltips can include links (with href) or buttons (with onClick).

// With href link
<Tooltip
  size="large"
  title="Documentation"
  description="Click to view docs"
  link={{ label: 'View docs', href: '/docs' }}
>
  <Button>With Link</Button>
</Tooltip>

// With onClick action
<Tooltip
  size="large"
  title="Settings"
  description="Click to open settings"
  link={{ label: 'Open settings', onClick: () => openSettings() }}
>
  <Button>With Action</Button>
</Tooltip>

All Variants

Small Tooltips - Light Mode

Small Tooltips - Dark Mode

Large Tooltips - Light Mode

Large Tooltips - Dark Mode

API Reference

Tooltip Props

Prop	Type	Default	Description
`content`	`ReactNode`	-	Content for small tooltips
`title`	`string`	-	Title for large tooltips
`description`	`string`	-	Description for large tooltips
`icon`	`ReactNode`	-	Icon for large tooltips (20px recommended)
`link`	`{ label: string; href?: string; onClick?: () => void }`	-	Link/button for large tooltips
`size`	`'small' \| 'large'`	Auto-detected	Tooltip size variant
`direction`	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' \| 'center'`	`'center'`	Corner with smaller border radius
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	Based on direction	Override Radix positioning side
`align`	`'start' \| 'center' \| 'end'`	Based on direction	Override Radix positioning alignment
`sideOffset`	`number`	`4`	Distance from trigger element
`delayDuration`	`number`	`200`	Delay before showing tooltip (ms)
`open`	`boolean`	-	Controlled open state
`defaultOpen`	`boolean`	-	Default open state (uncontrolled)
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`className`	`string`	-	Additional classes for tooltip content

Advanced Usage with Radix Primitives

For advanced use cases, the component re-exports Radix primitives:

import {
  TooltipProvider,
  TooltipRoot,
  TooltipTrigger,
  TooltipContent,
} from '@/components'

<TooltipProvider>
  <TooltipRoot>
    <TooltipTrigger asChild>
      <Button>Custom trigger</Button>
    </TooltipTrigger>
    <TooltipContent direction="top-left" size="small">
      Custom content with full control
    </TooltipContent>
  </TooltipRoot>
</TooltipProvider>