0 Compartilhamentos 38 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

Como desativar temporariamente sua conta do Facebook
Dicas
9 visualizações
Dicas
9 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.

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

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

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

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

O que você precisa saber sobre o Pix
Artigos
19 visualizações
Artigos
19 visualizações

O que você precisa saber sobre o Pix

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

Será o fim de DOCs, TEDs e transferências? Novo modelo de pagamento eletrônico proposto pelo Banco Central está prestes a entrar em funcionamento.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Como centralizar no CSS de forma definitiva
Dicas
20 visualizações
20 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
24 visualizações
24 visualizações

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

Carlos L. A. da Silva - 11 de setembro de 2020
Esse artigo foi escrito por um robô
Artigos
21 visualizações
21 visualizações

Esse artigo foi escrito por um robô

Carlos L. A. da Silva - 9 de setembro de 2020
Home Booth? Você quase trabalhou em um desses…
Artigos
32 visualizações
32 visualizações

Home Booth? Você quase trabalhou em um desses…

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