Tooltip

Explain UI elements on hover. Keep interface minimal. Educate users.

default.tsx

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Tooltip } from '@/components/ui/tooltip';
5
6export function Default() {
7  return (
8    <Tooltip>
9      <Tooltip.Trigger asChild>
10        <Button variant="outline">Hover me</Button>
11      </Tooltip.Trigger>
12      <Tooltip.Content>
13        <p>Add to library</p>
14      </Tooltip.Content>
15    </Tooltip>
16  );
17}

Installation

pnpm dlx nachui add tooltip

Anatomy

1import { Tooltip } from '@/components/ui/tooltip';

1<Tooltip>
2  <Tooltip.Trigger asChild>
3    <Button variant="outline">Hover me</Button>
4  </Tooltip.Trigger>
5  <Tooltip.Content>
6    <p>Helpful tooltip text</p>
7  </Tooltip.Content>
8</Tooltip>

Features

Multiple positions - Top, bottom, left, or right placement
Delay control - Configurable hover delay
Smooth animations - Fade and blur entrance effects
Arrow indicator - Visual pointer to the trigger element

Variants

Positions

positions.tsx

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Tooltip } from '@/components/ui/tooltip';
5
6const positions = [
7  { label: 'Top', side: 'top', content: 'Tooltip on top' },
8  { label: 'Bottom', side: 'bottom', content: 'Tooltip on bottom' },
9  { label: 'Left', side: 'left', content: 'Tooltip on left' },
10  { label: 'Right', side: 'right', content: 'Tooltip on right' },
11] as const;
12
13export function Positions() {
14  return (
15    <div className="flex flex-col items-center gap-10 md:flex-row">
16      {positions.map(({ label, side, content }) => (
17        <Tooltip key={side}>
18          <Tooltip.Trigger asChild>
19            <Button variant="outline">{label}</Button>
20          </Tooltip.Trigger>
21          <Tooltip.Content side={side}>{content}</Tooltip.Content>
22        </Tooltip>
23      ))}
24    </div>
25  );
26}

API Reference

Prop	Type	Default	Description
`delayDuration`	`number`	`200`	Delay before showing (ms)
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Callback when state changes

Tooltip.Trigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element
`className`	`string`	-	Additional CSS classes

Tooltip.Content

Prop	Type	Default	Description
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Tooltip position
`sideOffset`	`number`	`4`	Distance from trigger (px)
`className`	`string`	-	Additional CSS classes

Variants

Different Positions

1// Top (default)
2<Tooltip>
3  <Tooltip.Trigger asChild>
4    <Button>Top</Button>
5  </Tooltip.Trigger>
6  <Tooltip.Content side="top">
7    <p>Tooltip on top</p>
8  </Tooltip.Content>
9</Tooltip>
10 
11// Bottom
12<Tooltip>
13  <Tooltip.Trigger asChild>
14    <Button>Bottom</Button>
15  </Tooltip.Trigger>
16  <Tooltip.Content side="bottom">
17    <p>Tooltip on bottom</p>
18  </Tooltip.Content>
19</Tooltip>

Custom Delay

1<Tooltip delayDuration={500}>
2  <Tooltip.Trigger asChild>
3    <Button>Slow tooltip</Button>
4  </Tooltip.Trigger>
5  <Tooltip.Content>
6    <p>This appears after 500ms</p>
7  </Tooltip.Content>
8</Tooltip>

Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue

PreviousToast

NextTypography