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)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!