09 exemplos de tooltips dicas em português para usar em seu site, usando CSS e Javascript, e alguns apenas com CSS.
Você provavelmente já viu em algum site uma tooltip(dicas) em algum campo de ajuda, para mostrar mais detalhes sobre um texto ou uma função do site. Todos os Frameworks CSS disponibilizam tooltips para uso, porém, quando você não usa nenhum Framework a solução é criar seu próprio tooltip.
Aqui vamos listar alguns exemplos simples, alguns faz uso de JavaScript, outro são criados apenas com CSS o que facilita na hora da implementação.
Segue a lista com 09 exemplos de dicas (Tooltips).
Abaixo você confere a lista com as principais tooltips encontrados.
Destaque os recursos do produto com dicas de ferramenta CSS
See the Pen Highlight Product Features with CSS Tooltips by Ian Farb (@ianfarb) on CodePen.
Dicas de ferramentas CSS animadas
See the Pen Animated CSS Tooltips by Markus Bruch (@neogomo) on CodePen.
Dicas de ferramentas de automação com atributos de dados simples
See the Pen Automation Tooltips with Simple Data Attributes by Adwin (@adwin) on CodePen.
Conceito de dica de ferramenta CSS animada
See the Pen Animated CSS Tooltip Concept by Sasha (@sashatran) on CodePen.
Dicas rápidas em Pure CSS
See the Pen Quick CSS3 tooltips (No images, no js) by deineko (@deineko) on CodePen.
Dicas de ferramentas No-JS
See the Pen No-JS Tool tips by Chris Yaxley (@chrisyaxley) on CodePen.
Botão animado com dica
See the Pen Animated Button with Tooltip (Pure CSS) by Aditya Bhandari (@takeradi) on CodePen.
Pure CSS Tips in Text
See the Pen Pure-CSS Tooltips by Pure-CSS.com (@pure-css) on CodePen.
Dica de informação
See the Pen Pure CSS Tooltip by Cristina Silva (@cristina-silva) on CodePen.
Conclusão
Todos os itens adicionados acima são construídos por terceiros que disponibilizaram seus códigos no codepen, podem ser usados sem problemas em seu site, porém, recomendamos dar os devidos créditos.
Aqui no blog ainda temos uma coleção com 15 carregadores de páginas animados apenas com CSS que você precisa conhecer.
Espero ter ajudado 🙂
