C18 · Componentes

Tooltip

Pequeno balão de texto ao hover/focus. Apenas para descrições breves. Não use para conteúdo essencial — tooltips são inacessíveis em touch.

Comportamento

Trigger	Apresenta após
Hover (mouse)	300ms de delay.
Focus (teclado)	Imediato.
Touch	Não aparece — touch ignora hover.

Diretrizes

Faça

Use para esclarecer ícones sem label visível.
Texto curto (≤ 8 palavras).
Posição preferencial: acima do trigger.

Não faça

Não use para informação crítica — touch ignora.
Não combine ícone + tooltip + label visível (redundância).
Não inclua links ou botões dentro do tooltip.

Implementação acessível

<button aria-label="Configurações"
  aria-describedby="tip1">
  <svg aria-hidden="true" ... />
</button>
<div id="tip1" role="tooltip" hidden>
  Configurações da conta
</div>