Efeito shake no Tooltip
Introdução
Neste tutorial, vou mostrar como adicionar o efeito shake a um tooltip utilizando apenas html, CSS. Este efeito é visualmente atraente e pode ser facilmente implementado.
O Tutorial será breve e de forma rápida não será necessário o uso de nenhum tipo de biblioteca externa, será apenas html e css .
Primeiro passo você deverá criar a estrutura da página, para isso crie um arquivo html contendo o código que mostro abaixo:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Tooltip shake effect</title></head><body></body></html>
Logo após crio um componente tooltip que será animado:
<div class="tooltip-container"> Passe o mouse aqui! <div class="tooltip"> Tooltip com efeito shake! </div> </div>
Depois adiciono o css responsável pela estilização da página e pela animação do tooltip:
<style> body { height: 100vh; display: flex; align-items: center; justify-content: center; } .tooltip-container { position: relative; display: inline-block; padding: 1rem 2rem; cursor: pointer; font-size: 2em; line-height: 2em; color: #426DFB; border: 1px solid #2356FF; border-radius: 5px; } .tooltip { visibility: hidden; opacity: 0; width: max-content; background-color: #333; color: #fff; text-align: center; padding: 10px; border-radius: 5px; position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); transition: opacity 0.3s ease-in-out; z-index: 1; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } .tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; } .tooltip-container:hover .tooltip { visibility: visible; opacity: 1; } .shake { animation: shake 0.5s; } @keyframes shake { 0%, 100% { transform: translateX(-50%) translateY(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-50%) translateY(-5px); } 20%, 40%, 60%, 80% { transform: translateX(-50%) translateY(5px); } } </style>
No código acima, utilizei a tag <style> para adicionar o CSS diretamente no arquivo HTML. Abaixo deixo uma breve explicação das principais partes do CSS:
- body: Nesta tag adicionei as propriedades para centralizar o conteúdo na tela e definir o fundo e o alinhamento dos componentes.
- .tooltip: Define a estilização do tooltip.
- .tooltip::after: Aplica a estilização de indicação (seta) abaixo da caixa do tooltip.
- @keyframes shake: Define a animação, que adicionará o efeito shake ao tooltip.
Por ultimo adiciono o script responsável por adicionar a animação ao Tooltip:
<script> const tooltipContainer = document.querySelector('.tooltip-container'); const tooltip = document.querySelector('.tooltip'); tooltipContainer.addEventListener('mouseenter', () => { tooltip.classList.add('shake'); setTimeout(() => { tooltip.classList.remove('shake'); }, 500); }); </script>
No código acima, utilizei a tag <script> para adicionar o script diretamente no arquivo HTML. Abaixo deixo uma breve explicação do código acima:
- 1ª: Defino as variáveis que vão amarzenar o container onde está o tooltip (
tooltipContainer) e o tooltip (tooltip). - 2ª: Adiciono o evento (
mouseenter) ao (tooltipContainer), para quando o cursor passar pelo (tooltipContainer) ele adicionar o efeito. - 3ª: Dentro do evento que crie adiciono o script responsável por adicionar a classe css (
shake) ao componente (tooltip). - Por último: Adicionei a função (
setTimeout) para remover o efeito (shake) após 500 ms.
Deixo aqui um vídeo curto do processo e de como ficou animação do tooltip:
Conclusão
Com esses simples passos, você consegue de forma rápida criar um efeito para os tooltips de seu site ou blog deixando mais atraente usando apenas HTML e CSS. Caso necessite você pode personalizar a animação e estilização conforme a sua necessidade , alterando as cores ou até mesmo o tempo de duração do efeito.
Código fonte do tutorial efeito shake no tooltip:
Oi! Esse efeito de caixa de contexto (Tooltip) pode ser inserido dentro de um “banco de dados” com objetivo de exibir as definições apenas de palavras específicas?
Por exemplo: imagine que você esteja digitando um post sobre “tecnologia” no seu blog e, necessita por uma maneira mais automática/eficaz de mostrar o significado de “Wi-Fi”, só que eliminando aquele costume de sempre adicionar o código HTML manualmente.
Isto só é possível de realizar por meio de Javascript, PHP…. ou outra linguagem de back-end mais adequada?
(O site Canaltech tinha este recurso lá nos idos de 2013/2014; o tooltip nos posts do site tinha até mesmo um pequeno “footer”, com background azul, contendo um link referenciando a palavra que recebia o efeito)…
Opa, e ai blz?
Essa informação vir do backend, não acho legal, acho melhor ser tratada no frontend mesmo.
Talvez uma abordagem, seria criar um map no javascript contendo as palavras chave com sua descrição como valor e
daí criar alguma função que verificasse no texto se encontra essa palavra e então atribuir de forma automática o tooltip a está palavra.
Esse é apenas uma dica, o que consegui pensar no momento, não sei se é viável, qualquer coisa, deixa uma mensagem, quem sabe possa elaborar algo melhor.
vlw!