Como criar uma dica de ferramenta CSS3 simples

As dicas de ferramentas são uma ótima maneira de mostrar ao usuário mais informações simplesmente passando o mouse sobre uma imagem ou texto. Eles podem ser usados, por exemplo, para fornecer legendas para imagens ou descrições mais longas de links, ou qualquer informação útil que melhore a experiência do usuário de seu site, sem invadir o design.

Hoje vou mostrar como criar uma dica de ferramenta simples usando HTML e CSS para exibir a tag de título de seus hiperlinks.

Vamos começar criando uma marcação simples para o link. Precisamos dar a ele um título que será o conteúdo da dica de ferramenta e atribuir a ele uma classe:

CSS3 Tooltip

O próximo passo é criar um estilo rudimentar para nossa classe de dica de ferramenta:

.tooltip{display: inline;position: relative;}

Agora estamos exibindo nossa dica de ferramenta em linha com nosso link usando o posicionamento relativo. Em seguida, queremos criar uma caixa arredondada para formar o corpo da dica de ferramenta e posicioná-la de modo que ela flutue acima do link:

.tooltip:hover:after{background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 26px;color: #fff;content: attr(title);left: 20%;padding: 5px 15px;position: absolute;z-index: 98;width: 220px;}

Estamos usando o seletor: hover que seleciona um elemento, neste caso nosso link, no mouseover e o: after selector, que insere o conteúdo após o elemento selecionado. Nós especificamos um fundo preto com opacidade de 80%, e para navegadores que não suportam cores RGBA, fornecemos um plano de fundo cinza escuro.

Cantos ligeiramente arredondados são criados usando o atributo border-radius e definimos a cor do texto para branco. Por fim, posicionamos a caixa de dicas à esquerda do link e adicionamos um pouco de preenchimento.

Além do estilo e posicionamento, definimos a propriedade de conteúdo:

content: attr(title);

Esta propriedade nos permite inserir o conteúdo que queremos, que pode ser uma string, um arquivo de mídia ou um atributo do elemento. Neste caso, estamos usando o atributo title do link.

Agora, quando você passa o mouse sobre o link, uma dica de ferramenta deve aparecer acima dele com o texto definido como o título do link. Temos um problema, porém, a informação do título está sendo mostrada duas vezes: uma vez na dica e outra pelo navegador. Para corrigir isso, precisamos fazer uma pequena alteração no nosso HTML:

CSS3 Tooltip 

O que fizemos aqui é envolver o texto do link em uma tag span com seu próprio atributo de título. Agora, o navegador exibirá o conjunto de títulos na tag span quando o link for passado.

Para terminar, adicionaremos uma seta na parte inferior da dica de ferramenta, para dar um toque extra de estilo. Fazemos isso usando o: before selector e alguns estilos de borda:

.tooltip:hover:before{border: solid;border-color: #333 transparent;border-width: 6px 6px 0 6px;bottom: 20px;content: "";left: 50%;position: absolute;z-index: 99;}

Estamos usando alguns hacks de borda aqui para criar o efeito de uma seta: definir as cores da borda à esquerda e à direita para transparente e controlar as larguras da borda. Também posicionamos a seta para que ela fique na parte inferior da caixa de dica de ferramenta.

E aí está, uma dica simples com a tag de título do elemento pairou. Você também pode usar isso para tags alt de imagem, ou até mesmo colocar seu próprio texto no CSS para aparecer onde quiser.

Você pode ver um demonstração de trabalho aqui .

Como você constrói dicas de ferramentas? Você já usou essa técnica em um site? Deixe-nos saber nos comentários.

Imagem em destaque / miniatura, sugestão de imagem via Shutterstock.