Como adicionar uma tooltip com HTML e CSS

Neste artigo você vai aprender a como adicionar uma tooltip com HTML e CSS, de forma simples e descomplicada, sem recursos de JavaScript

Fala programador(a), beleza? Bora aprender mais sobre HTML e CSS!

Na verdade, para adicionar o tooltip não precisamos nem de CSS

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

A estratégia que vamos adotar aqui necessita apenas de um atributo HTML, que é o title

Desta forma conseguimos exibir algum texto quando o usuário passa o ponteiro do mouse em cima do elemento alvo

Veja um exemplo prático:

<div title="Este é o meu tooltip">
  <p>Passe o mouse para obter informações</p>
</div>

A parte ruim é justamente o CSS, não podemos alterar como este elemento é exibido

Mas conseguimos passar a informação para quem precisa

Alternativas mais robustas, para personalizar o tooltip e mudar o tempo de espera necessitam de JavaScript

Utilize esta alternativa quando precisar realizar algo simples com a tooltip

Como apenas descrever o que um componente do seu site faz

Conclusão

Neste artigo você aprendeu a como adicionar uma tooltip com HTML

Utilizamos o atributo title, que pode ser adicionado em qualquer tag que você precisar

Ele exibe um texto, que passamos como conteúdo deste atributo

A parte ruim é que não podemos alterar o estilo ou animar de alguma forma diferente este tooltip do HTML

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!