Criando um tooltip animado com CSS clip-path

Aprenda a fazer uma micro interação bem sútil, mas que vai fazer toda a diferença no seu layout.

Introdução

Fala pessoal! Continuando as nossas Dicas de CSS, hoje vamos aprender a fazer uma micro interação bem legal ao criar um tooltip.

E para criar nossa interação, nós vamos utilizar o clip-path, se você nunca utilizou, não se preocupe, no vídeo vamos aprender. Fica aqui também, um post completo explicando como utilizar o clip-path com CSS e também SVG.

Você pode ver todo o código da demo aqui e pode ver a demo rodando aqui.

Vídeo

Conclusão

Novamente foi um post/vídeo bastante simples, mas que espero que seja útil para vocês irem aprendendo esses pequenos detalhes. Peço novamente que se puderem, compartilhem com seus amigos e não deixem de se inscrever no canal do YouTube, eu estou começando ainda, então é muito importante que vocês me ajudem nesse início!