0 Compartilhamentos 118 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 cortar texto sem usar uma linha de script
Dicas
11 visualizações
Dicas
11 visualizações

Como cortar texto sem usar uma linha de script

Carlos L. A. da Silva - 11 de janeiro de 2021

Conheça o poder da propriedade text-overflow no CSS e nunca mais edite strings no braço.

Como começar a programar
Artigos
18 visualizações
Artigos
18 visualizações

Como começar a programar

Carlos L. A. da Silva - 7 de janeiro de 2021

Então, você quer entrar nessa vida? A decisão é sua, mas nós podemos te ajudar com os primeiros passos.

Como cancelar qualquer conta online para sempre
Dicas
21 visualizações
Dicas
21 visualizações

Como cancelar qualquer conta online para sempre

Carlos L. A. da Silva - 30 de dezembro de 2020

Que tal fazer uma limpeza nas suas contas inativas ou finalmente largar aquela rede social que só dá desgosto?

Deixe um Comentário

Your email address will not be published.

Mais publicações

Retrospectiva (positiva) de 2020
Artigos
23 visualizações
23 visualizações

Retrospectiva (positiva) de 2020

Carlos L. A. da Silva - 29 de dezembro de 2020
O que seria internet quântica?
Artigos
23 visualizações
23 visualizações

O que seria internet quântica?

Carlos L. A. da Silva - 23 de dezembro de 2020
Como fazer uma árvore de Natal… com CSS!
Dicas
29 visualizações
29 visualizações

Como fazer uma árvore de Natal… com CSS!

Carlos L. A. da Silva - 21 de dezembro de 2020
Promoções de Jogos do Final de Semana (18/12) – Edição Natalina
Notícias
34 visualizações
34 visualizações

Promoções de Jogos do Final de Semana (18/12) – Edição Natalina

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