09 exemplos de Tooltips com CSS e Javascript

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 🙂