DEV Community

Cover image for Reticências com tooltip automático (Vue)
Jony Hayama
Jony Hayama

Posted on

Reticências com tooltip automático (Vue)

TLDR;

🔗 Resultado final

A história

Hoje a responsável pela UX da empresa onde trabalho nos trouxe uma solicitação bem simples:

"quando um determinado texto for muito grande, exiba somente as duas primeiras linhas e, quando o usuário passar o mouse, mostre a dica de tela com o texto completo".

-- UX da Empresa

Num primeiro momento pensamos em limitar o número de caracteres e fazer com o bom velho substring:

Mas aí veio a pergunta "quantos caracteres perfazem duas linhas?" 🤔

Fica bastante difícil definir essa quantidade quando não estamos utilizando uma fonte monoespaçada... E mesmo assim, fica bastante complicado se trouxermos a responsividade para a equação...

Pensando nisso, resolvemos nos adaptar e utilizar o elegantíssimo line-clamp do CSS:

🔀 PR criado.

🚀 Solução enviada para staging.

🤞 Só falta aprovação de QA e...

"Seria interessante que a dica de tela fosse exibida somente se o texto tiver sido truncado".

-- QA da empresa

E volta o cão arrependido para pensar mais um pouco sobre o assunto 😢.

Revisitando a solução baseada em quantidade de caracteres, poderíamos resolver assim:

Mas eu sou teimoso.

O line-clamp é mais elegante. Reflete melhor a problemática de exibir por quantidade de linhas.

Depois de pesquisar um pouco, encontrei uma forma de avaliar se o texto foi truncado baseado no tamanho do container utilizando as propriedades scrollWidth e scrollHeight:

No final do dia, com a lógica na cabeça, criei dois componentes, um baseado na quantidade de caracteres (sim, as vezes queremos limitar um texto por caracteres e não por linhas) e outro baseado em linhas.

Agora, no nosso projeto sempre que precisamos disso basta utilizarmos:

<line-clamp text="texto" :lines="2" />
<truncate-text text="texto" :max-char="50" />
Enter fullscreen mode Exit fullscreen mode

Exemplo:

⚠️ IMPORTANTE: Nenhum dos códigos acima foi compartilhado na intenção de ser copiado e colado, é apenas uma forma de exemplificar o recurso 😜

Espero que isso lhe seja útil. Estou sempre aberto à pitacos e sugestões 😀

PS: Confesso que adoraria uma solução que não dependesse de JS... juro que tentei...mas não encontrei... se souber, compartilha aí 🙏

Top comments (0)