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:
Elemento que precisa de explicação
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:
.tooltip:focus::after,
.tooltip:hover::after {
content: attr(aria-label);
display: block;
}
A partir daí, você deve configurar o posicionamento da dica de texto de acordo com suas necessidades de layout:
.tooltip:focus::after,
.tooltip:hover::after {
position: absolute;
top: 100%;
font-size: 11px;
background-color: #f2f2f2;
border: 1px solid #000;
padding: 3px;
margin-top: 10px;
}
.tooltip:hover::before {
top: 100%;
right: 0;
left: 0;
margin: -5px auto 0;
display: block;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
