Tooltip — Sinapse Design System

Default

Trigger ”?” 24×24. Hover/focus exibe a caixa.

<Tooltip text="Esse campo é calculado com base nos últimos 12 meses." />

<template>
<span class="group relative inline-flex">
  <button class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-secondary-100 text-secondary-900" aria-describedby="tt">
    <span class="text-xs font-bold">?</span>
  </button>
  <span id="tt" role="tooltip" class="invisible absolute left-1/2 top-full z-10 mt-2 -translate-x-1/2 w-64 rounded-card bg-info text-info-foreground p-3 text-sm shadow-medium group-hover:visible group-focus-within:visible">
    Esse campo é calculado com base nos últimos 12 meses.
  </span>
</span>
</template>

<span className="group relative inline-flex">
<button className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-secondary-100 text-secondary-900" aria-describedby="tt">
  <span className="text-xs font-bold">?</span>
</button>
<span id="tt" role="tooltip" className="invisible absolute left-1/2 top-full z-10 mt-2 -translate-x-1/2 w-64 rounded-card bg-info text-info-foreground p-3 text-sm shadow-medium group-hover:visible group-focus-within:visible">
  Esse campo é calculado com base nos últimos 12 meses.
</span>
</span>

<span class="group relative inline-flex">
<button class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-secondary-100 text-secondary-900" aria-describedby="tt">
  <span class="text-xs font-bold">?</span>
</button>
<span id="tt" role="tooltip" class="invisible absolute left-1/2 top-full z-10 mt-2 -translate-x-1/2 w-64 rounded-card bg-info text-info-foreground p-3 text-sm shadow-medium group-hover:visible group-focus-within:visible">
  Esse campo é calculado com base nos últimos 12 meses.
</span>
</span>

Com título e link

Estrutura: title (semibold) + text + link.

<Tooltip
title="Token de acesso"
text="Validade de 30 dias. Renove antes de expirar para não perder o histórico."
linkText="Saiba mais"
linkHref="#"
/>

Sizes

sm = trigger 16×16 + box 249. md = trigger 24×24 + box 294.

<Tooltip size="sm" text="Tooltip small (249px)" />
<Tooltip size="md" text="Tooltip medium (294px)" />

Placement

Acima (default) ou abaixo do trigger.

<Tooltip placement="top" text="Aparece acima" />
<Tooltip placement="bottom" text="Aparece abaixo" />

Trigger custom

Use slot trigger para qualquer elemento — útil em ícones de tabela ou labels.

<Tooltip text="Atestado emitido pelo médico responsável.">
<span slot="trigger" class="material-symbols-outlined cursor-pointer text-secondary-default">help</span>
</Tooltip>

Acessibilidade

Trigger é <button> nativo com aria-describedby apontando pro tooltip
Box tem role="tooltip"
Hover ou focus exibe (CSS only) — funciona com teclado
ariaLabel no botão para screen reader (default: “Informação”)

Props

Prop	Tipo	Default	Descrição
`text`	`string`	obrigatório	Texto principal.
`title`	`string`	—	Título opcional.
`linkText`	`string`	—	Texto do link.
`linkHref`	`string`	—	URL do link.
`size`	`'sm' \| 'md'`	`'md'`	Tamanho do trigger e da box.
`placement`	`'top' \| 'bottom'`	`'top'`	Posição da caixa.
`ariaLabel`	`string`	`'Informação'`	Label do botão trigger.
`class`	`string`	—	Classes adicionais.

Slots

Slot	Descrição
`trigger`	Element customizado no lugar do ”?”.