25.03.2025

Exibir Tooltip em HTML Apenas Quando o Ellipsis Está Ativo

Resposta Rápida

Para exibir um tooltip ao passar o mouse somente quando o texto estiver truncado em um ellipsis, utilize JavaScript. Verifique se o scrollWidth do elemento excede seu clientWidth. Se o overflow for detectado, adicione o atributo title, e o tooltip será exibido.

// Use JavaScript para comparar `offsetWidth` e `scrollWidth`
element.offsetWidth < element.scrollWidth ? element.title = element.textContent : element.removeAttribute('title');

Para garantir que o ellipsis seja exibido, aplique o seguinte CSS:

.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

Atribua a classe .ellipsis ao elemento e habilite o JavaScript para verificar o overflow ao passar o mouse. Assim, o tooltip será exibido somente quando necessário.

Conclusão

Com jQuery, você pode configurar um manipulador de eventos que irá "observar" a presença de um ellipsis:

// Observe quando o DOM estiver pronto!
$(document).ready(function(){
  $('.ellipsis').on('mouseenter', function() {
    var $this = $(this);
    $this.attr('title', $this.offsetWidth < $this.scrollWidth ? $this.text() : '');
  });
});

Otimização de Desempenho do Tooltip

Melhore o desempenho do tooltip:

• Armazene o objeto jQuery como $this para obter um melhor desempenho.
• Gerencie a interação do tooltip usando as propriedades CSS pointer-events e position:relative.
• Ajuste a visibilidade e o estilo dos tooltips utilizando propriedades como box-shadow, border-radius, opacity e visibility.

Gerenciando Conteúdo Dinâmico

Para gerenciar conteúdo dinâmico, você deve:

• Verificar o overflow após adicionar novos elementos ao DOM ou modificar os existentes.
• Adicionar e remover dinamicamente o atributo title com base na presença de overflow.
• Atualizar efetivamente os tooltips para todos os elementos usando seletor de classe jQuery.

Solução Elegante com JavaScript Puro

Para aqueles que preferem a elegância do JavaScript puro, aqui está um exemplo de código:

// Função ilustrando os benefícios do forEach()
document.querySelectorAll('.ellipsis').forEach(function(el) {
  el.addEventListener('mouseenter', function() {
    if (this.offsetWidth < this.scrollWidth && !this.title) {
      this.title = this.innerText;
    }
  });
});

Acessibilidade: Protegendo os Tooltips

A regra principal ao melhorar a experiência do usuário com tooltips é preservar sua acessibilidade:

• Tooltips devem ser compreensíveis para todos os usuários, incluindo aqueles que utilizam leitores de tela.
• Use aria-label ou aria-labelledby para uma interação mais eficaz com leitores de tela e gerencie o atributo title.

Compatibilidade de Navegadores e Cross-browser Safari

Assegure-se de que sua solução funcione corretamente em todos os navegadores, incluindo Internet Explorer.

Testes de Desempenho

Acima de tudo, busque um impacto mínimo no desempenho: evite bibliotecas pesadas e código complexo para não desacelerar o carregamento da página.

Compasso para Touchscreen

Não se esqueça dos touchscreens e pense em como exibir tooltips sem eventos de hover, possivelmente utilizando touchstart.

Visualização

Como exemplo, considere uma mala que não pode ser fechada por causa de uma etiqueta excessivamente grande:

Etiqueta Pequena: [Jonathan App...]

Somente quando o nome é truncado, a mala fornecerá mais informações:

[Jonathan App...] ↔️ Tooltip Ativado: "Jonathan Appleside"

[Jonathan] ↔️ Nenhum tooltip necessário, nenhuma informação extra.

Ellipsis é como um sorriso misterioso, insinuando que a história não acabou, revelando informações adicionais somente quando necessário.

Recursos Úteis

1. Truncando Texto com Ellipsis em CSS | CSS-Tricks — Uma exploração de como usar ellipsis para truncar texto em CSS.
2. Como Determinar se o Texto Termina com um Ellipsis - Stack Overflow — Uma coleção de métodos para detecção de ellipsis em texto que transborda.
3. Propriedade text-overflow em CSS - W3Schools — Análise da propriedade text-overflow em CSS.
4. Exemplo de Tooltip em CSS para Ellipsis - CodePen — Uma demonstração de usos práticos de tooltips para texto com ellipsis.
5. Reconhecimento de Caracteres em Android - CodeProject - Discute o reconhecimento de caracteres, incluindo reconhecimento de texto e ellipsis.

Video

Navigation