01.12.2024

Adicionando um Tooltip a um Div em HTML: Efeito FadeIn/FadeOut

Resposta Rápida

Para criar um tooltip que funcione inteiramente com CSS, use a seguinte estrutura: um div contendo um elemento span escondido. O span se torna visível quando o usuário passa o mouse sobre ele:

<div class="tooltip">Passe o mouse sobre mim
  <span class="tooltiptext">Informações do tooltip</span>
</div>

.tooltip { 
  position: relative; 
  display: inline-block; 
}
.tooltip .tooltiptext {
  visibility: hidden; 
  background-color: black; 
  color: white;
  text-align: center; 
  border-radius: 6px; 
  padding: 5px;
  position: absolute; 
  z-index: 1; 
  top: 100%; 
  left: 50%;
  transform: translateX(-50%); 
  opacity: 0; 
  transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
  visibility: visible; 
  opacity: 1;
}

Esse método proporciona um suave efeito de aparecimento ao passar o mouse, sem requerer JavaScript.

Melhorando o Tooltip: Adicionando JavaScript

Para interatividade mais complexa e funcionalidades expandidas, JavaScript ou jQuery podem ser úteis. Veja algumas melhorias que você pode considerar:

• Conteúdo Dinâmico: O JavaScript pode alterar o conteúdo do tooltip em resposta a ações do usuário ou outros eventos, usando dados de atributos ou obtidos através de requisições de API.

• Posicionamento Interativo: Altere a posição do tooltip com base na localização do cursor ou para evitar sobreposição com outros elementos, utilizando o estilo pointer-events: none; ou JavaScript.

• Tooltip Persistente: Se precisar que o tooltip permaneça visível por um período prolongado, utilize o atributo data-tooltip-persistent e JavaScript para mantê-lo na tela.

• Efeitos Animados: Vá além das simples animações CSS e adicione fades, rolagens ou pulos suaves para tornar o tooltip mais dinâmico.

Um exemplo de estilização de tooltip usando o pseudo-elemento ::before:

[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
[data-tooltip]:hover::before {
  opacity: 1;
}

Certifique-se de incluir um tooltip simples com o atributo title como uma opção de fallback para casos em que o JavaScript esteja desativado.

Elevando Para o Próximo Nível com CSS

Crie tooltips únicos e eficazes seguindo estas dicas:

• Consistência: Mantenha a consistência do design com a aparência geral do seu site, incluindo paddings, cores e fontes semelhantes.

• Responsividade: Certifique-se de que os tooltips sejam exibidos corretamente em diferentes dispositivos e telas, evitando transbordamentos ou sobreposições com outros elementos.

• Acessibilidade: Considere a acessibilidade para o usuário, especialmente para aqueles que usam teclados e leitores de tela. Implemente atributos ARIA para melhorar a percepção do conteúdo.

Exemplo de estilização de tooltips complexos:

.tooltip {
  /* Estilos base do tooltip */
}
.tooltip::before {
  /* Estilos para setas ou indicadores ajudando o usuário */
}

Visualização

Imagine um tooltip como um sussurro de um livro. Aproximando-se, ele compartilha seus segredos com você:

<div title="Segredos do HTML">📖</div>

Passe o mouse sobre o livro, e ele revela o que está dentro:

Antes de passar o mouse: 📖
Depois de passar o mouse: 📖🗨️ "Segredos do HTML"

Um simples movimento do mouse descobre esse conhecimento oculto. 🗨️✨

Mestres do Tooltip: JavaScript e jQuery

Com bibliotecas e plugins, você pode ampliar significativamente as capacidades dos tooltips:

• jQuery Tooltip: Este plugin adiciona uma infinidade de animações e aumenta a interatividade do tooltip.

• Tippy.js: Uma biblioteca com extensas configurações de animação e recursos avançados para personalização de estilos.

• Popper.js: Uma biblioteca para posicionamento perfeito do tooltip, garantindo que eles apareçam exatamente onde necessário.

Inclua apenas as ferramentas que são realmente necessárias, mantendo em mente o desempenho e a acessibilidade.

Referências Úteis

1. title - HTML: Hypertext Markup Language | MDN — Seção do MDN Web Docs sobre o atributo title.
2. Tooltip CSS — Material educacional sobre como criar tooltips com CSS no W3Schools.
3. GitHub - atomiks/tippyjs: Biblioteca de tooltip, popover e menu suspenso — Tippy.js, uma poderosa biblioteca para tooltips modernos na web.

Video

Navigation