Tooltip — Sinapse Design System

import { Button } from '@/components/ui/button'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'

export function TooltipExample() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline" size="icon" aria-label="Informação">?</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Esse campo é calculado com base nos últimos 12 meses.</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'
</script>

<template>
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger as-child>
        <Button variant="outline" size="icon" aria-label="Informação">?</Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>Esse campo é calculado com base nos últimos 12 meses.</p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</template>

<span class="itps-tooltip itps-tooltip--md itps-tooltip--top">
  <button type="button" class="itps-tooltip__trigger" aria-label="Informação" aria-describedby="tooltip-default">
    <span aria-hidden="true">?</span>
  </button>
  <span id="tooltip-default" role="tooltip" class="itps-tooltip__content">
    <span class="itps-tooltip__text">Esse campo é calculado com base nos últimos 12 meses.</span>
  </span>
</span>

Instalação

Instale Tooltip e Button da sua stack e rode o comando individual ITpS em seguida. O comando itps add tooltip é theme-only: ele valida o slug e confirma que o contrato visual vem do tema ITpS, das classes copy-first e dos snippets desta página.

terminal · React/Next

pnpm dlx shadcn@latest add tooltip button
pnpm dlx github:ITPS/sinapse-ui-cli add tooltip

terminal · Vue3/Nuxt4

pnpm dlx shadcn-vue@latest add tooltip button
pnpm dlx github:ITPS/sinapse-ui-cli add tooltip

O comando individual adapta só este componente; não instala o catálogo inteiro.

Uso

Em React/Next com shadcn/ui e Vue3/Nuxt4 com shadcn-vue, use Tooltip, TooltipTrigger e TooltipContent dentro de TooltipProvider. A stack controla delay, posicionamento, foco e hover.

Para HTML ou wrappers finos, use itps-tooltip com trigger focável, aria-describedby e conteúdo com role="tooltip". Tooltip é ajuda curta e não interativa; para mensagem persistente use Callout.

Exemplos

Estrutura

Peça	React/Next e Vue3/Nuxt4	HTML
Escopo	`TooltipProvider`	sem equivalente obrigatório
Raiz	`Tooltip`	`itps-tooltip`
Trigger	`TooltipTrigger`	`itps-tooltip__trigger` + `aria-describedby`
Conteúdo	`TooltipContent`	`itps-tooltip__content[role="tooltip"]`

Ícone e posição

Use ícone quando o contexto já sugere ajuda. Em copy-first, itps-tooltip--top é o padrão; itps-tooltip--bottom ajuda quando não há espaço acima.

<span class="itps-tooltip itps-tooltip--sm itps-tooltip--bottom">
  <button type="button" class="itps-tooltip__trigger" aria-label="Ajuda sobre atestado" aria-describedby="tooltip-icon">
    <i class="ti ti-help" aria-hidden="true"></i>
  </button>
  <span id="tooltip-icon" role="tooltip" class="itps-tooltip__content">
    <span class="itps-tooltip__title">Atestado</span>
    <span class="itps-tooltip__text">Atestado emitido pelo médico responsável.</span>
  </span>
</span>

API copy-first

Classe/atributo	Uso
`itps-tooltip`	Wrapper da relação trigger/conteúdo.
`itps-tooltip--sm`, `itps-tooltip--md`	Tamanho visual.
`itps-tooltip--top`, `itps-tooltip--bottom`	Posição visual.
`itps-tooltip__trigger`	Botão ou controle focável.
`itps-tooltip__content`	Conteúdo curto com `role="tooltip"`.
`role="tooltip"`	Identifica o conteúdo como tooltip.
`aria-describedby`	Liga trigger ao conteúdo.
`aria-label`	Nomeia triggers apenas com ícone.
`aria-hidden="true"`	Esconde ícones decorativos de tecnologias assistivas.

Acessibilidade

O trigger precisa ser focável e ter nome acessível. Use aria-label quando o trigger for só ícone. Não coloque links, botões, inputs ou conteúdo essencial dentro de tooltip; o conteúdo deve complementar, não substituir label, validação ou help text persistente.