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
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!