# Tooltip

> Una línea de texto que aclara un control, en hover y en foco.

```tsx
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "sebs7n-ui/tooltip"
```

## Ejemplos

### Una línea, en hover y en foco

El `aria-label` del botón sigue siendo obligatorio: el tooltip no es un nombre accesible.

```tsx
import { Button } from "sebs7n-ui/button"
import { CopyIcon } from "lucide-react"
import { Tooltip, TooltipContent, TooltipTrigger } from "sebs7n-ui/tooltip"

function Basico() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Tooltip>
        <TooltipTrigger render={<Button aria-label="Copiar al portapapeles" size="icon-md" variant="outline" />}>
          <CopyIcon />
        </TooltipTrigger>
        <TooltipContent>Copiar al portapapeles</TooltipContent>
      </Tooltip>
      <Tooltip>
        <TooltipTrigger render={<Button variant="ghost" />}>Arriba</TooltipTrigger>
        <TooltipContent side="right">También abre con Tab</TooltipContent>
      </Tooltip>
    </div>
  )
}
```

## Props

### Tooltip

Hereda las props de `Tooltip.Root`.

Sin props propias: pasa todo al primitivo.

### TooltipContent

Hereda las props de `Tooltip.Popup` y `Tooltip.Positioner`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `align` | `"center" \| "start" \| "end"` | `"center"` | How to align the popup relative to the specified side. |
| `alignOffset` | `number \| OffsetFunction` | `0` | Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. |
| `side` | `"top" \| "bottom" \| "left" \| "right" \| "inline-end" \| "inline-start"` | `"top"` | Which side of the anchor element to align the popup against. May automatically change to avoid collisions. |
| `sideOffset` | `number \| OffsetFunction` | `6` | Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. |
| `className` | `string` | — | — |

### TooltipProvider

Hereda las props de `Tooltip.Provider`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `delay` | `number` | `300` | How long to wait before opening the tooltip on hover. Specified in milliseconds. |

### TooltipTrigger

Hereda las props de `Tooltip.Trigger`.

Sin props propias: pasa todo al primitivo.

## Teclado

| Tecla | Qué hace |
|---|---|
| Tab | Enfocar el trigger lo muestra. |
| Escape | Lo cierra. |

## Accesibilidad

- **No sirve como nombre accesible.** Un botón de ícono necesita `aria-label` igual: en un celular el tooltip no existe.
- Aparece con foco de teclado, no solo con mouse.
- `TooltipProvider` va una vez en el layout raíz; `delay` por defecto, 300 ms.

## Reglas de uso

- Una línea. Si necesita dos, es un `Popover`.
- Nunca contenido interactivo adentro: no se puede llegar con el teclado.
- No lo pongas en algo que ya dice lo que hace.

## Relacionados

[popover](/docs/components/popover.md) · [button](/docs/components/button.md) · [kbd](/docs/components/kbd.md)