Introduction

Tooltips display supplementary information on hover or focus. Built on Radix UI for positioning, accessibility, and smooth animations.

Installation

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip';

Usage

<TooltipProvider>
<Tooltip>
  <TooltipTrigger>Hover me</TooltipTrigger>
  <TooltipContent>
    <p>Tooltip text</p>
  </TooltipContent>
</Tooltip>
</TooltipProvider>

Examples

Default

TooltipDefault

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

export default function Component() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild><Button variant="outlined">Hover me</Button></TooltipTrigger>
        <TooltipContent><p>This is a tooltip</p></TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Placements

Use the side prop on TooltipContent to control placement.

TooltipPlacements

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

export default function Component() {
  return (
    <TooltipProvider>
      <div className="flex gap-4">
        {(['top', 'bottom', 'left', 'right'] as const).map((side) => (
          <Tooltip key={side}>
            <TooltipTrigger asChild><Button variant="outlined" size="sm">{side}</Button></TooltipTrigger>
            <TooltipContent side={side}><p>Tooltip on {side}</p></TooltipContent>
          </Tooltip>
        ))}
      </div>
    </TooltipProvider>
  );
}

Themes

Set theme on TooltipContent to use one of the design system colors.

TooltipThemes

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

const themes = ['neutral', 'primary', 'success', 'danger', 'warning', 'info', 'light'] as const;

export default function Component() {
  return (
    <TooltipProvider>
      <div className="flex flex-wrap gap-3">
        {themes.map((theme) => (
          <Tooltip key={theme}>
            <TooltipTrigger asChild><Button variant="outlined" size="sm">{theme}</Button></TooltipTrigger>
            <TooltipContent theme={theme}><p>{theme} tooltip</p></TooltipContent>
          </Tooltip>
        ))}
      </div>
    </TooltipProvider>
  );
}

API Reference

TooltipContent

Prop	Type	Default	Description
`side`	`top \| bottom \| left \| right`	`top`	Preferred placement
`sideOffset`	`number`	`4`	Distance from trigger
`align`	`start \| center \| end`	`center`	Alignment
`theme`	`'neutral' \| 'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'light'`	`'neutral'`	Color theme

Tooltip

On this page