Como fazer tooltip e popover com css puro?
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?
Não queria o uso de javascript para criá-los. Tem algum jeito de criar?
Calebe Menezes
Curtidas 0
Melhor post
Raphael Alves
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.
Abraço.
GOSTEI 1
Mais Respostas
Nulin
14/11/2016
Eu já há muito tempo a gostar da plataforma Joomla. Agora, o mesmo já pode fazer o download de temas prontos [url= http://www.templatemonster.com/pt-br/temas-joomla] http://www.templatemonster.com/pt-br/temas-joomla[/url] sob esta plataforma e fazer um site por um curto período de tempo .
GOSTEI 0
Nulin
14/11/2016
Eu já há muito tempo a gostar da plataforma Joomla. Agora, o mesmo já pode fazer o download de temas prontos http://www.templatemonster.com/pt-br/temas-joomla/ sob esta plataforma e fazer um site por um curto período de tempo .
GOSTEI 0
Dayan Barros
14/11/2016
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
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
GOSTEI 0
Fernando Gaspar
14/11/2016
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
[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
GOSTEI 0
Dayan Barros
14/11/2016
Essa é boa mesmo Gaspar.
Abs
Abs
GOSTEI 0
Raphael Alves
14/11/2016
Você também pode usar SVG para fazer uma animação mais orgânica, animando os paths.
Abraaço.
Abraaço.
GOSTEI 0
Robson Cavalcante
14/11/2016
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.
Abraço.
Fiz desse jeito aqui e deu certo! A resposta do Raphael está correta :)
GOSTEI 0