Pular para o conteúdo
Faculdade PhorteDesign System

Tooltip

Em andamento

Dica curta que aparece no hover e no foco de um controle — o que um ícone faz, o que um campo aceita —, ligada a ele por aria-describedby. Some com Esc e não some quando o ponteiro passa para ela (WCAG 1.4.13).

Função
Estado e aviso
Também chamado de
dica, balão, tooltip, legenda flutuante
Mora em
app/components/molecules/Tooltip.tsx
Última mudança
2026-09-29
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Embaixo
  3. Num botão de ajuda

Quando usar

Para completar o nome de um controle que já tem nome: o que o botão "Compartilhar" copia, o que conta na carga horária.

Faça

  • Ponha um gatilho focável (botão, link, campo) com nome próprio — o botão só-ícone continua com aria-label.
  • Escreva uma frase curta, sem link nem botão.
  • Use lado="baixo" quando o gatilho estiver no topo da tela.

Evite

  • Guardar ali informação essencial: no celular não há hover, e a dica só aparece com o foco.
  • Tooltip num elemento que não recebe foco (um ícone solto, um texto): quem usa teclado nunca o vê.
  • Repetir o nome do botão na dica: o leitor diria duas vezes.

Quando não usar. Para a regra de um campo, use a dica do FormField, que fica à vista. Para uma mensagem que pede atenção, o Alert. Para conteúdo com link ou botão, um Modal ou a própria página.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Gatilho — O filho, com `aria-describedby` apontando para a dica (somado ao que ele já tiver).
  2. Balão — Fundo `--ink`, texto `--ink-inverse` 12px, até 256px de largura, com sombra; acima ou abaixo do gatilho.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
FechadoO balão fica no DOM com hidden — o aria-describedby continua valendo.
AbertoEsmaece em 150ms, só com movimento liberado.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Ponteiro sobre o gatilhoAbre depois de 300ms (atraso) — conferido no teste da ficha, com atraso 0.
Ponteiro passa para a dicaContinua aberta: o ponteiro está no invólucro — conferido no teste da ficha.
Foco no gatilhoAbre na hora; sai com o foco.
EscFecha de qualquer lugar sem mover o foco — conferido no teste da ficha.

Relacionados