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

Gerador de Cartão CSS

Crie o CSS de um contêiner de cartão: fundo, borda, raio dos cantos, espaçamento interno e sombra suave, com pré-visualização imediata e código para copiar e colar.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Gerador de README

Gere um README.md estruturado a partir de alguns campos: nome do projeto, tagline, recursos, comando de instalação, trecho de início rápido, autor e licença. Cole direto no seu repositório.

Visualizador de Markdown

Escreva Markdown e veja a renderização HTML atualizar ao vivo. Sintaxe com estilo GitHub, incluindo tabelas, listas de tarefas, blocos de código cercados e autolinks.

Ferramenta disponível em outros idiomas