Como fazer tooltip e popover com css puro?

14/11/2016

0

CSS

Opa pessoal, será que tem algum jeito de criar aqueles recursos do bootstrap tooltip e e popover apenas com css?

Não queria o uso de javascript para criá-los. Tem algum jeito de criar?
Calebe Menezes

Calebe Menezes

Responder

Post mais votado

11/07/2017

Então, você pode fazer de várias formas, eu utilizaria um before ou after com a mensagem do tooltip e faria ela aparecer no hover do elemento que recebe o tooltip, o efeito você escolhe, pode usar um display:none e display:block pra aparecer, pode usar animation e botar um delay com opacity pra suavizar a transição, é só escolher e se divertir, rs.

Abraço.

Raphael Alves

Raphael Alves
Responder

Mais Posts

12/07/2017

Dayan Barros

Fala Calebe,

Se você quiser só fazer uma animação com hover como o Raphael falou, é só com CSS, mas se quiser um botão para apertar e aparecer a mensagem, vai precisar de jQuery.

Abraços
Responder

14/07/2017

Fernando Gaspar

Fala Calebe, temos um curso onde é criada uma Landing Page e na aula 6 mostra a criação do tooltip, da uma olhada lá:
[url:descricao=Landing Page: Como criar um layout com HTML, CSS e JavaScript]https://www.devmedia.com.br/curso/landing-page-como-criar-um-layout-com-html-css-e-javascript/1960[/url]

Abraços
Responder

18/07/2017

Dayan Barros

Essa é boa mesmo Gaspar.

Abs
Responder

20/07/2017

Raphael Alves

Você também pode usar SVG para fazer uma animação mais orgânica, animando os paths.

Abraaço.
Responder

21/07/2017

Robson Cavalcante

Então, você pode fazer de várias formas, eu utilizaria um before ou after com a mensagem do tooltip e faria ela aparecer no hover do elemento que recebe o tooltip, o efeito você escolhe, pode usar um display:none e display:block pra aparecer, pode usar animation e botar um delay com opacity pra suavizar a transição, é só escolher e se divertir, rs.

Abraço.


Fiz desse jeito aqui e deu certo! A resposta do Raphael está correta :)
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar