Tooltip

Un popup que muestra información relacionada con un elemento cuando el elemento recibe el foco del teclado o el mouse pasa sobre él.

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}

Instalación

pnpm dlx nachui add tooltip

Anatomía

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

1<Tooltip>
2  <Tooltip.Trigger asChild>
3    <Button variant="outline">Pasa el mouse</Button>
4  </Tooltip.Trigger>
5  <Tooltip.Content>
6    <p>Texto de tooltip útil</p>
7  </Tooltip.Content>
8</Tooltip>

Características

Múltiples posiciones - Colocación arriba, abajo, izquierda o derecha
Control de retraso - Retraso de hover configurable
Animaciones suaves - Efectos de entrada con desvanecimiento y desenfoque
Indicador de flecha - Puntero visual al elemento activador

Variantes

Posiciones (Positions)

positions.tsx

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Tooltip } from '@/components/ui/tooltip';
5
6export function Positions() {
7  return (
8    <div className="flex flex-col items-center gap-10 md:flex-row">
9      <Tooltip>
10        <Tooltip.Trigger asChild>
11          <Button variant="outline">Top</Button>
12        </Tooltip.Trigger>
13        <Tooltip.Content side="top">Tooltip on top</Tooltip.Content>
14      </Tooltip>
15
16      <Tooltip>
17        <Tooltip.Trigger asChild>
18          <Button variant="outline">Bottom</Button>
19        </Tooltip.Trigger>
20        <Tooltip.Content side="bottom">Tooltip on bottom</Tooltip.Content>
21      </Tooltip>
22
23      <Tooltip>
24        <Tooltip.Trigger asChild>
25          <Button variant="outline">Left</Button>
26        </Tooltip.Trigger>
27        <Tooltip.Content side="left">Tooltip on left</Tooltip.Content>
28      </Tooltip>
29
30      <Tooltip>
31        <Tooltip.Trigger asChild>
32          <Button variant="outline">Right</Button>
33        </Tooltip.Trigger>
34        <Tooltip.Content side="right">Tooltip on right</Tooltip.Content>
35      </Tooltip>
36    </div>
37  );
38}

Referencia de API

Prop	Tipo	Por defecto	Descripción
`delayDuration`	`number`	`200`	Retraso antes de mostrar (ms)
`open`	`boolean`	-	Estado abierto controlado
`onOpenChange`	`(open: boolean) => void`	-	Callback cuando cambia el estado

Tooltip.Trigger

Prop	Tipo	Por defecto	Descripción
`asChild`	`boolean`	`false`	Renderizar como elemento hijo
`className`	`string`	-	Clases CSS adicionales

Tooltip.Content

Prop	Tipo	Por defecto	Descripción
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Posición del tooltip
`sideOffset`	`number`	`4`	Distancia del activador (px)
`className`	`string`	-	Clases CSS adicionales

Variantes

Diferentes Posiciones

1// Arriba (por defecto)
2<Tooltip>
3  <Tooltip.Trigger asChild>
4    <Button>Arriba</Button>
5  </Tooltip.Trigger>
6  <Tooltip.Content side="top">
7    <p>Tooltip arriba</p>
8  </Tooltip.Content>
9</Tooltip>
10 
11// Abajo
12<Tooltip>
13  <Tooltip.Trigger asChild>
14    <Button>Abajo</Button>
15  </Tooltip.Trigger>
16  <Tooltip.Content side="bottom">
17    <p>Tooltip abajo</p>
18  </Tooltip.Content>
19</Tooltip>

Retraso Personalizado

1<Tooltip delayDuration={500}>
2  <Tooltip.Trigger asChild>
3    <Button>Tooltip lento</Button>
4  </Tooltip.Trigger>
5  <Tooltip.Content>
6    <p>Esto aparece después de 500ms</p>
7  </Tooltip.Content>
8</Tooltip>

AnteriorToast