Tooltip

Explicar elementos al hacer hover. Interfaz minimalista. Educar usuarios.

Net MRR

$18,240

+6.4% vs February

1'use client';
2
3import { InformationCircleIcon } from '@hugeicons/core-free-icons';
4import { HugeiconsIcon } from '@hugeicons/react';
5import { Tooltip } from '@/components/ui/tooltip';
6
7export function Default() {
8  return (
9    <div className="border-border bg-card w-full max-w-xs rounded-xl border p-4">
10      <div className="flex items-center gap-1.5">
11        <p className="text-muted-foreground text-xs">Net MRR</p>
12        <Tooltip>
13          <Tooltip.Trigger asChild>
14            <button
15              type="button"
16              aria-label="How net MRR is calculated"
17              className="text-muted-foreground hover:text-foreground transition-colors"
18            >
19              <HugeiconsIcon icon={InformationCircleIcon} size={14} />
20            </button>
21          </Tooltip.Trigger>
22          <Tooltip.Content className="w-56 whitespace-normal">
23            New and expansion revenue minus churn and downgrades. One time charges, taxes and
24            refunds are left out.
25          </Tooltip.Content>
26        </Tooltip>
27      </div>
28      <p className="mt-1 text-xl font-semibold tracking-tight">$18,240</p>
29      <p className="text-success-text mt-1 text-xs">+6.4% vs February</p>
30    </div>
31  );
32}

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>

Composición

Usa la siguiente composición para construir un Tooltip:

Tooltip
├── Tooltip.Trigger
└── Tooltip.Content

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)

1'use client';
2
3import { Comment01Icon, Delete02Icon, HistoryIcon, Share01Icon } from '@hugeicons/core-free-icons';
4import { HugeiconsIcon } from '@hugeicons/react';
5import { Tooltip } from '@/components/ui/tooltip';
6
7const actions = [
8  {
9    side: 'top',
10    icon: Comment01Icon,
11    label: 'Comment on selection',
12    hint: 'Comment on selection (⇧⌘M)',
13  },
14  {
15    side: 'bottom',
16    icon: HistoryIcon,
17    label: 'Version history',
18    hint: 'Version history, last saved 4m ago',
19  },
20  {
21    side: 'left',
22    icon: Share01Icon,
23    label: 'Share document',
24    hint: 'Shared with 3 people in Northwind',
25  },
26  {
27    side: 'right',
28    icon: Delete02Icon,
29    label: 'Move to trash',
30    hint: 'Move to trash, recoverable for 30 days',
31  },
32] as const;
33
34export function Positions() {
35  return (
36    <div className="border-border bg-card flex flex-col items-center gap-10 rounded-xl border px-6 py-4 md:flex-row">
37      {actions.map((action) => (
38        <Tooltip key={action.side}>
39          <Tooltip.Trigger asChild>
40            <button
41              type="button"
42              aria-label={action.label}
43              className="text-muted-foreground hover:bg-muted hover:text-foreground flex size-9 items-center justify-center rounded-md transition-colors"
44            >
45              <HugeiconsIcon icon={action.icon} size={18} strokeWidth={1.6} />
46            </button>
47          </Tooltip.Trigger>
48          <Tooltip.Content side={action.side}>{action.hint}</Tooltip.Content>
49        </Tooltip>
50      ))}
51    </div>
52  );
53}

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>

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorToast

SiguienteTree