Como fazer tooltip e popover com css puro?

CSS

14/11/2016

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

Curtidas 0

Melhor post

Raphael Alves

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.
GOSTEI 1

Mais Respostas

Nulin

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

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

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
GOSTEI 0
Fernando Gaspar

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
GOSTEI 0
Dayan Barros

Dayan Barros

14/11/2016

Essa é boa mesmo Gaspar.

Abs
GOSTEI 0
Raphael Alves

Raphael Alves

14/11/2016

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

Abraaço.
GOSTEI 0
Robson Cavalcante

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.


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