Tooltip

Texto informativo que aparece al hacer hover o focus sobre un elemento. Se cierra automáticamente.

---

Import

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

---

Uso básico

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover acá</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Este es el tooltip</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Importante: TooltipProvider envuelve todos los tooltips de la app. Ponelo una sola vez en el root.

---

Con delay

<TooltipProvider delayDuration={200}>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent>Aparece en 200ms</TooltipContent>
  </Tooltip>
</TooltipProvider>

---

Con atajo de teclado

<Tooltip>
  <TooltipTrigger asChild>
    <Button size="icon" variant="ghost">
      <Save className="h-4 w-4" />
    </Button>
  </TooltipTrigger>
  <TooltipContent>
    <div className="flex items-center gap-2">
      <span>Guardar</span>
      <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 text-xs">
        ⌘S
      </kbd>
    </div>
  </TooltipContent>
</Tooltip>

---

Props

TooltipProvider

Prop	Tipo	Default	Descripción
delayDuration	number	700	Delay antes de mostrar (ms)
skipDelayDuration	number	300	Delay al pasar entre tooltips

TooltipContent

Prop	Tipo	Default	Descripción
side	'top' | 'right' | 'bottom' | 'left'	'top'	Lado de apertura
sideOffset	number	4	Separación del trigger
className	string	—	Clases adicionales

---

Accesibilidad

• Aparece con hover y con focus (navegación por teclado)
• role="tooltip" + aria-describedby conectado al trigger
• Escape cierra el tooltip abierto