Vox Mente
Navegação

Componentes

Tooltip

beta

Texto curto no hover e no foco. Nunca informação essencial, nunca elemento clicável — quem usa toque não alcança.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/tooltip

Playground
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" />}>
      Passe o mouse ou dê Tab
    </TooltipTrigger>
    <TooltipContent>Adicionar aluno</TooltipContent>
  </Tooltip>
</TooltipProvider>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
TooltipProvider
  └─ Tooltip
    └─ TooltipTrigger
    └─ TooltipContent

Uso

Aparece no hover e no foco do teclado. Precisa de um `TooltipProvider` em volta — normalmente um só, perto da raiz do app.

Quando usar

Texto curto, dispensável, que só reforça o que o ícone ou o rótulo já sugerem. Nunca a única fonte de uma informação.

Posicionamento

`side` e `align` posicionam o conteúdo em relação ao gatilho. O padrão é `side="top"` e `align="center"`.

Atraso de abertura

`delay` no `TooltipProvider` vale para todos os tooltips daquela árvore. O padrão do componente é `0` — sem espera.

Quando não usar

Tooltip nunca leva conteúdo interativo — quem usa toque não alcança o hover e nunca vê o que está dentro. Se a informação é essencial ou precisa de um botão, link ou campo, use Popover.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

Tooltip, TooltipContent, TooltipProvider, TooltipTrigger não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css