Softonic

Gerador de Tooltip CSS

Etapa 1 / 2
Próximo

Tooltips são frequentemente o primeiro lugar onde um projeto recorre a uma biblioteca JavaScript, mas um simples pseudo-elemento ::after acionado por um atributo data-tooltip cobre 90% dos casos reais. Este gerador produz exatamente as regras .tooltip e .tooltip::after que você precisa, escolha a posição superior, inferior, esquerda ou direita, ajuste a cor de fundo e do texto, e copie o bloco para sua folha de estilo.

Como integrar o tooltip no seu HTML

  1. 1

    Escolha uma posição

    Superior, inferior, esquerda ou direita. O gerador usa `calc(100% + 8px)` mais a transformação correta para que a bolha fique alinhada ao gatilho.

  2. 2

    Escolha as cores

    O fundo define a bolha, a cor do texto é aplicada ao rótulo do tooltip. Mantenha o contraste em 4.5:1 ou melhor para legibilidade.

  3. 3

    Copie o CSS

    Cole o bloco gerado na sua folha de estilo. Ele fornece `.tooltip`, `.tooltip::after` e uma regra `:hover`.

  4. 4

    Marque o gatilho

    Adicione `class="tooltip" data-tooltip="Seu texto"` a qualquer elemento. O `::after` lê o atributo via `content: attr(data-tooltip)`.

Tooltips em CSS puro: o que você ganha e o que você perde

Um tooltip apenas em CSS é pequeno, rápido e funciona com JavaScript desativado. No entanto, ele vive dentro da ordem de origem do DOM e, portanto, herda algumas restrições que você precisa considerar ao projetar.

O que o CSS gerado faz

  • Define o gatilho como position: relative para que o tooltip absoluto esteja ancorado a ele.
  • Puxa o rótulo de content: attr(data-tooltip), o que significa que você nunca duplica o texto.
  • Anima a opacidade com transition: opacity 0.15s, para que a aparição pareça rápida, mas não abrupta.
  • Usa pointer-events: none na bolha para que nunca bloqueie cliques no gatilho.

Matemática de posicionamento

Posição Regra de deslocamento
cima bottom: calc(100% + 8px); left: 50%; translateX(-50%)
baixo top: calc(100% + 8px); left: 50%; translateX(-50%)
esquerda right: calc(100% + 8px); top: 50%; translateY(-50%)
direita left: calc(100% + 8px); top: 50%; translateY(-50%)

Avisos de acessibilidade

  • data-tooltip não é lido por leitores de tela. Se a informação for essencial, combine-o com aria-label ou texto visível.
  • Usuários de teclado precisam de :focus-visible além de :hover. Estenda a regra gerada para .tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; }.
  • Tooltips cortados por overflow: hidden em um ancestral desaparecerão. Mova o gatilho para fora do contêiner de corte ou mude para um popover renderizado em JS para UIs densas.

Perguntas frequentes

Um pseudo-elemento mantém o DOM limpo, evita duplicar o texto do rótulo e permite estilizar o tooltip sem se preocupar em coincidir acidentalmente com outros elementos. O custo é que o conteúdo ::after não pode ser indexado por tecnologia assistiva, então reforce o texto crítico com aria-label.

Sim, adicione um segundo pseudo-elemento, por exemplo .tooltip::before, moldado com uma caixa de largura/altura zero e bordas coloridas. É um truque clássico de triângulo em CSS; o Gerador de Triângulo CSS nesta suíte produz as declarações de borda exatas que você precisa.

Adicione transition-delay: 0.3s à regra ::after, mas redefina para zero ao sair do hover, ou use transition: opacity 0.15s 0.3s; para atrasar a aparição sem atrasar a dispensa.

A posição e as cores que você escolhe são enviadas ao nosso servidor para gerar o CSS, mas não são armazenadas nem reutilizadas. Na página de várias etapas, elas viajam no link entre etapas; na visualização de uma página, nada é mantido.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de Papel de Parede em Gradiente

Gere papéis de parede em gradiente borrados de três cores para laptop, telefone ou fundos do Zoom. Randomize ou defina o ângulo e o desfoque manualmente.

Gerador de Cores Análogas

Crie uma paleta análoga de cinco cores a partir de qualquer cor base, com o trio clássico, dois tons externos e valores hex, RGB e HSL.

Conversor de ASCII para Hex

Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.

Ferramenta disponível em outros idiomas