CSS HTML

Como adicionar uma tooltip com HTML e CSS

13 de novembro de 2021

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

adicionar uma tooltip com HTML capa

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!
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x