0 Compartilhamentos 41 Views

Como criar uma dica de texto sem usar Javascript

26 de agosto de 2020

O grande desafio do design de interfaces é manter o usuário informado sobre os processos da aplicação ou da página da web. Dicas de texto, as famosas “tooltips” são uma poderosa aliada nesse desafio e isso todo mundo sabe. Agora, você sabia que é possível gerar esse recurso sem usar uma única linha de JavaScript?

O truque aqui é empregar o CSS para obter o mesmo resultado. Com isso, o desenvolvedor pode economizar tempo e processamento usando uma funcionalidade que o navegador interpreta, reduzindo o volume de chamadas na página e contornando ambientes onde scripts estão bloqueados com uma solução elegante.

Para aplicar essa dica, iremos utilizar o atributo aria-label ao elemento que desejamos manifestar a “tooltip”. Isso irá funcionar como um “rótulo”, que será exibido pelo navegador durante o pairar do mouse ou o toque do dedo a partir de instruções no CSS. Confira o exemplo:

No valor de aria-label iremos inserir a string de texto que desejamos que seja exibida para o usuário.

O pulo do gato acontece no CSS, com instruções para o hover e o focus do elemento:

A partir daí, você deve configurar o posicionamento da dica de texto de acordo com suas necessidades de layout:

Carregando...

Você pode se interessar

Promoções de Jogos do Final de Semana (25/09)
Notícias
5 visualizações
Notícias
5 visualizações

Promoções de Jogos do Final de Semana (25/09)

Carlos L. A. da Silva - 25 de setembro de 2020

Confira as melhores ofertas de jogos de PC para o final de semana.

Cinco alternativas ao Moment.js que você precisa conhecer agora
Artigos
7 visualizações
Artigos
7 visualizações

Cinco alternativas ao Moment.js que você precisa conhecer agora

Carlos L. A. da Silva - 25 de setembro de 2020

Biblioteca será aposentada, mas não é de hoje que já existem opções mais robustas no mercado.

Como desativar temporariamente sua conta do Facebook
Dicas
66 visualizações
Dicas
66 visualizações

Como desativar temporariamente sua conta do Facebook

Carlos L. A. da Silva - 19 de setembro de 2020

Preparado para um "detox" da rede social? O Facebook permite que você suspenda sua conta sem precisar apagá-la permanentemente.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Promoções de Jogos do Final de Semana (18/09)
Notícias
17 visualizações
17 visualizações

Promoções de Jogos do Final de Semana (18/09)

Carlos L. A. da Silva - 18 de setembro de 2020
O que você precisa saber sobre o Pix
Artigos
24 visualizações
24 visualizações

O que você precisa saber sobre o Pix

Carlos L. A. da Silva - 16 de setembro de 2020
Como centralizar no CSS de forma definitiva
Dicas
21 visualizações
21 visualizações

Como centralizar no CSS de forma definitiva

Carlos L. A. da Silva - 12 de setembro de 2020
Promoções de Jogos do Final de Semana (11/09)
Notícias
30 visualizações
30 visualizações

Promoções de Jogos do Final de Semana (11/09)

Carlos L. A. da Silva - 11 de setembro de 2020