# Tooltip

Dica curta, para botão que só tem ícone.

Compõe com `TooltipTrigger` e `TooltipContent`.

Não guarde informação essencial aqui: dica não aparece no toque e não é lida em
todo contexto. O `aria-label` do botão continua obrigatório.

## No React Native

Não porta, e não há substituto: a dica aparece ao pousar o ponteiro, e no toque não existe pousar. O que no web era um ícone com dica vira, no celular, um ícone com rótulo escrito ao lado, ou um `accessibilityLabel`, que resolve para o leitor de tela e não resolve para quem enxerga.

## Importação

```tsx
import { Tooltip } from '@rivocode/ui'
```

## Exemplos

### Em botão de ícone

```tsx
import { Trash2 } from 'lucide-react'
import { Button, Tooltip, TooltipContent, TooltipTrigger } from '@rivocode/ui'

export function OnAnIconButton() {
  return (
    <div className="flex min-h-32 items-end justify-center">
      <Tooltip defaultOpen>
        <TooltipTrigger render={<Button variant="ghost" size="icon" aria-label="Excluir" />}>
          <Trash2 size={16} aria-hidden="true" />
        </TooltipTrigger>
        <TooltipContent>Excluir nota</TooltipContent>
      </Tooltip>
    </div>
  )
}
```

### Fechada

```tsx
import { Trash2 } from 'lucide-react'
import { Button, Tooltip, TooltipContent, TooltipTrigger } from '@rivocode/ui'

export function Closed() {
  return (
    <Tooltip>
      <TooltipTrigger render={<Button variant="secondary" size="sm" />}>Passe o mouse</TooltipTrigger>
      <TooltipContent>A dica aparece depois de um instante</TooltipContent>
    </Tooltip>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `actionsRef` | `RefObject<TooltipRootActions \| null>` |  | 0.4.0 | A ref to imperative actions. |
| `defaultOpen` | `boolean` |  | 0.4.0 | Whether the tooltip is initially open. |
| `defaultTriggerId` | `string \| null` |  | 0.4.0 | ID of the trigger that the tooltip is associated with. |
| `disabled` | `boolean` |  | 0.4.0 | Whether the tooltip is disabled. |
| `disableHoverablePopup` | `boolean` |  | 0.4.0 | Whether the tooltip contents can be hovered without closing the tooltip. |
| `handle` | `TooltipHandle<Payload>` |  | 0.4.0 | A handle to associate the tooltip with a trigger. |
| `onOpenChange` | `((open: boolean, eventDetails: TooltipRootChangeEventDetails) => void)` |  | 0.4.0 | Event handler called when the tooltip is opened or closed. |
| `onOpenChangeComplete` | `((open: boolean) => void)` |  | 0.4.0 | Event handler called after any animations complete when the tooltip is opened or closed. |
| `open` | `boolean` |  | 0.4.0 | Whether the tooltip is currently open. |
| `trackCursorAxis` | `"both" \| "none" \| "x" \| "y"` |  | 0.4.0 | Determines which axis the tooltip should track the cursor on. |
| `triggerId` | `string \| null` |  | 0.4.0 | ID of the trigger that the tooltip is associated with. |

## Partes

O componente se monta com as peças abaixo. Todas vêm de `@rivocode/ui`.

### TooltipContent

O balão da dica.

`side` diz o lado preferido, `align` o alinhamento no eixo dele e `sideOffset` a
distância até o gatilho (as mesmas três props das outras peças que flutuam, com
a mesma folga padrão de 6px). A Base UI vira sozinha quando não cabe.

Texto curto, uma dica que precisa de duas frases é uma `FieldDescription` no
lugar errado.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `align` | `Align` |  | - | Alinhamento no eixo do lado escolhido. |
| `render` | `ComponentRenderFn<HTMLProps, TooltipPopupState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |
| `side` | `Side` |  | 0.4.0 | Lado preferido do gatilho. |
| `sideOffset` | `number \| OffsetFunction` |  | - | Distancia entre o gatilho e o painel, em pixels. |

### TooltipTrigger

O que mostra a dica ao receber foco ou o ponteiro.

Envolve o elemento por `render`. **Dica não substitui rótulo**: no celular não
existe hover, e quem navega por toque nunca a vê.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `closeDelay` | `number` |  | 0.4.0 | How long to wait before closing the tooltip. |
| `closeOnClick` | `boolean` |  | 0.4.0 | Whether the tooltip should close when this trigger is clicked. |
| `delay` | `number` |  | 0.4.0 | How long to wait before opening the tooltip on hover. |
| `disabled` | `boolean` |  | 0.4.0 | If `true`, the tooltip will not open when interacting with this trigger. |
| `handle` | `TooltipHandle<Payload>` |  | 0.4.0 | A handle to associate the trigger with a tooltip. |
| `payload` | `Payload` |  | 0.4.0 | A payload to pass to the tooltip when it is opened. |
| `render` | `ComponentRenderFn<HTMLProps, TooltipTriggerState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

## Ver também

- [AlertDialog](/componentes/alert-dialog.md)
- [ContextMenu](/componentes/context-menu.md)
- [Dialog](/componentes/dialog.md)
- [Popconfirm](/componentes/popconfirm.md)
- [Popover](/componentes/popover.md)
- [PreviewCard](/componentes/preview-card.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)