Gerador de tooltip CSS

Gerador de tooltip CSS: para que serve

Tooltip é a dica curta que aparece ao passar o mouse num botão ou ícone. Este gerador faz a dica só com CSS, nas quatro posições, com setinha opcional, cores, cantos e um atraso para ela não piscar quando o mouse só passa por cima.

O código é acessível: a dica é ligada ao botão por aria-describedby, tem role=tooltip, aparece também quando o elemento recebe foco pelo teclado ou toque e respeita quem prefere menos movimento. A prévia tem três botões para testar.

Como usar

1. Escolha a posição, as cores e os cantos.
2. Ajuste o atraso e a setinha.
3. Copie o HTML e o CSS.

Quando usar

• Explicar ícones sem texto.
• Dicas em formulários.
• Botões de ação em painéis.

Perguntas frequentes

O tooltip funciona no celular?

No celular não existe passar o mouse; a dica aparece quando o elemento recebe foco, ao tocar num botão ou link. Por isso não coloque no tooltip uma informação que a pessoa precisa obrigatoriamente: ela deve estar também no texto da página.

Como fica acessível?

O texto da dica fica num elemento com role=tooltip ligado ao botão por aria-describedby, para o leitor de tela ler junto com o nome do botão. Ele aparece também no foco do teclado (focus-visible) e não depende só de cor.

Por que tem um atraso para aparecer?

Um pequeno atraso evita que as dicas pisquem quando o mouse só passa por cima a caminho de outro lugar. Para sumir, o efeito é imediato.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas