02.04.2025

Posicionamento do Tooltip Relativo ao Cursor em HTML/CSS

Resposta Rápida

Crie um tooltip dinâmico com posicionamento fixo, atualizando suas coordenadas left e top em tempo real utilizando os valores de pageX e pageY enquanto o cursor se move:

document.addEventListener('mousemove', event => {
  const tooltip = document.getElementById('tooltip');
  tooltip.style.left = `${event.pageX}px`;
  tooltip.style.top = `${event.pageY}px`;
  tooltip.style.display = 'block';
});

Dessa forma, seu tooltip seguirá o cursor, atualizando continuamente sua posição na tela. Para criar um pequeno espaço entre o cursor e o tooltip, ajuste os valores de pageX e pageY.

Configurações Avançadas do Tooltip

Deslocamento e Exibição do Tooltip

Adicione um deslocamento ao tooltip para minimizar a chance de sobreposição com outros elementos da interface:

const xOffset = 10;
const yOffset = 20;

document.addEventListener('mousemove', event => {
  const tooltip = document.getElementById('tooltip');
  tooltip.style.left = `${event.pageX + xOffset}px`;
  tooltip.style.top = `${event.pageY + yOffset}px`;
});

Garanta que o tooltip só seja exibido quando necessário:

#tooltip {
  display: none;
  position: fixed;
  z-index: 1000;
}

.element:hover + #tooltip {
  display: block;
}

Restringindo a Área do Tooltip

Certifique-se de que o tooltip não ultrapasse a área visível da tela:

document.addEventListener('mousemove', event => {
  const tooltip = document.getElementById('tooltip');
  const rightEdge = window.innerWidth - tooltip.offsetWidth;
  const bottomEdge = window.innerHeight - tooltip.offsetHeight;

  tooltip.style.left = `${Math.min(event.pageX + xOffset, rightEdge)}px`;
  tooltip.style.top = `${Math.min(event.pageY + yOffset, bottomEdge)}px`;
});

Conteúdo e Estilo do Tooltip

Aprimore os tooltips com formatação estilosa e informações úteis:

const tooltipContent = `<strong>Informações sobre a Flor:</strong> <em>Fragrante</em>`;
tooltip.innerHTML = tooltipContent;

Aqui está como um tooltip visualmente atraente pode ser:

#tooltip {
  background-color: #fffced;
  border: 1px solid #f5e6a8;
  border-radius: 6px;
  padding: 8px;
  white-space: nowrap;
}

Interagindo com Elementos da Página

Torne o tooltip interativo com elementos na página:

<a href="#" data-tooltip-content="Mais informações sobre esta seção">Sobre Nós</a>

document.querySelectorAll('[data-tooltip-content]').forEach(element => {
  element.addEventListener('mouseenter', event => {
    const tooltip = document.getElementById('tooltip');
    tooltip.innerHTML = event.target.getAttribute('data-tooltip-content');
    tooltip.style.display = 'block';
  });

  element.addEventListener('mouseleave', () => {
    const tooltip = document.getElementById('tooltip');
    tooltip.style.display = 'none';
  });
});

Visualização

Imagine o tooltip como uma borboleta (🦋), sempre seguindo a posição do cursor:

O cursor (🖱️) se move pela tela:
[🖱️........🌸........🌺........]

Onde quer que vá, a "borboleta" (🦋) segue:
[....🦋....🖱️....🦋....🖱️....]

Ao pairar sobre 🌸, a "borboleta" fornece as **informações** necessárias.

Posicionar corretamente o tooltip garante sua acessibilidade bem ao lado do cursor. 🖱️ + 🦋 = 💡

Melhorando o Tooltip

Controle de Overflow e Gerenciamento de Z-Index

Você pode aprimorar o comportamento do tooltip com estas propriedades CSS, tornando seu posicionamento mais harmonioso e o conteúdo visível:

#tooltip {
  overflow: hidden;
  z-index: 1000;
}

O posicionamento relativo do elemento ajudará a posicionar corretamente os elementos filhos com posicionamento absoluto.

Emojis e Caracteres Unicode

Adicione emojis ou caracteres unicode aos tooltips para melhor visualização:

<div data-tooltip-content="✅ Marcar como concluído">Tarefa</div>

Pseudo-elementos CSS

O pseudo-elemento ::after permite que você crie tooltips sem JavaScript:

.element:hover::after {
  content: attr(data-tooltip-content);
  position: absolute;
  display: block;
  /* Estilização adicional */
}

Otimização para Vários Dispositivos

Os tooltips devem funcionar efetivamente em dispositivos de toque:

element.addEventListener('touchstart', showTooltipFunction);
element.addEventListener('touchend', hideTooltipFunction);

Como você pode ver, seu tooltip proporcionará uma experiência confortável para o usuário em todos os tipos de dispositivos.

Recursos Úteis

1. Tooltip CSS — Um guia para criar tooltips com efeito de hover.
2. Eventos do Mouse — Aprendendo como trabalhar com eventos de mouse para posicionamento dinâmico.
3. Popper - Motor de Posicionamento — Usando Popper.js para posicionamento dinâmico de elementos.
4. Tooltip | jQuery UI — Criando tooltips dinâmicos usando o plugin jQuery UI.
5. Tooltips e Toggletips — Garantindo acessibilidade e diretrizes úteis para uso.

Video

Navigation