Tooltip

Dica visual que aparece ao passar o mouse sobre um elemento. Background invertido (mesmo padrão do toast). Seta apontando para o trigger. 4 posições e variante com ícone. Dark mode automático.

components/tooltip.cssAbrir no Figma

Variantes

Passe o mouse sobre os ícones para ver os tooltips nas 4 posições.

Carregando exemplo...

Propriedades

Classes disponíveis para configurar o tooltip.

Propriedade	Tipo	Default	Descrição
.tooltip-wrapper	classe	—	Container relativo do trigger + tooltip.
.tooltip	classe	—	Tooltip (padding 4px 8px, radius 6px). Aparece no hover.
.tooltip--top	classe	—	Posiciona acima do trigger.
.tooltip--bottom	classe	—	Posiciona abaixo do trigger.
.tooltip--left	classe	—	Posiciona à esquerda do trigger.
.tooltip--right	classe	—	Posiciona à direita do trigger.
.tooltip-text	classe	—	Texto do tooltip (p5 medium, 12px).
.tooltip-icon	classe	—	Ícone opcional (16x16).

Código

Snippets prontos para copiar e usar.

Tooltip padrão

<div class="tooltip-wrapper">
    <button>Trigger</button>
    <div class="tooltip tooltip--top">
        <span class="tooltip-text">Olá, eu sou o Tooltip!</span>
    </div>
</div>

Tooltip com ícone

<div class="tooltip-wrapper">
    <button>Trigger</button>
    <div class="tooltip tooltip--top">
        <span class="tooltip-icon"><!-- SVG 16x16 --></span>
        <span class="tooltip-text">Olá, eu sou o Tooltip!</span>
    </div>
</div>

Tokens utilizados

Variáveis semânticas aplicadas ao componente.

Token	Uso
--surface-base-neutral-container-default-on-black	Background (light mode)
--surface-base-neutral-container-emphasis	Background (dark mode)
--text-base-neutral-white	Cor do texto e ícone
--radius-default	Border-radius (6px)
--spacing-1	Padding vertical (4px)
--spacing-2	Padding horizontal / gap ícone (8px)
--z-tooltip	Z-index (1070)

Versão3.0.0

Última atualização2026-03-19

Caminhocomponentes/tooltip.md