O tooltip ou “dica de contexto” é usado basicamente quando você deseja mostrar informações adicionais ou explicativa a um elemento.
Nesse tutorial, mostrarei um forma de criar um efeito tooltip usando CSS3. Eu tenho uma video aula mostrando como fazer o efeito usando jQuery. Mas neste com CSS3 vamos fazer um pouco diferente. A idéia é fazer um elemento fique circular e parecer como estivesse expandindo a partir do link quando for passar o mouse.
Vamos ao que interessa.
Primeiramente, vamos definir nosso HTML:
<header> <h1>Tooltip com CSS 3</h1> </header> <ul id="shared"> <li class="facebook"><a href="#"><span>Facebook</span></a></li> <li class="twitter"><a href="#"><span>Twitter</span></a></li> <li class="favorite"><a href="#"><span>Favoritos</span></a></li> <li class="email"><a href="#"><span>Email</span></a></li> </ul>Temos uma header apenas para definir o título. E temos uma lista não ordenada, sendo que os itens são aplicados classe porque vamos usar uma imagem só com os ícones e mudando apenas o posicionamento deles. Essa técnica tem chama-se CSS Sprite.
Dentro dos itens, temos os links e nesse links temos um span com titulo que será exibido ao passar o mouse no link.
Agora, vamos definir o CSS que estará num arquivo separado chamado style.css, que estará numa pasta chamada css. Desse tutorial, utilizarei o normalize.css para normalizar as tags.
O CSS estará todo comentado pra facilitar a compreensão:
/** * Define uma imagem pra background */ body{ background:url(../images/body.jpg) no-repeat center top; } /** * Define uma altura pra header */ header{ height: 200px; } /** * Define as configuração do H1 **/ h1{ text-align: center; padding-bottom: 10px; text-transform: uppercase; } /********************************** * TOOLTIP COM CSS3 ********************************** **/ /** * CONFIGURAR A LISTA NÃO ORDENADA. * Remove os bullets; * define uma largura; * centraliza na horizontal; **/ #shared { list-style:none; width:340px; margin:0 auto; } /** * CONFIGURAR O ITEM DA LISTA NÃO ORDENADA. * Define um float:left, para * os itens ficarem um do lado do outro; **/ #shared li{ float:left; } /** * CONFIGURAR O LINK * Define um display:block porque vamos usar largura e altura * os itens ficarem um do lado do outro; * Defini largura(width) e altura (height); * Uma position:relative, pra delimitar o espaço do elemento que * o elemento filho que terá que seguir; * O background contendo as imagens dos icones; * Um margin, para espaçamento de 3px; **/ #shared li a{ display: block; width:65px; height: 60px; position: relative; background:url(../images/shared.png) no-repeat; margin:3px; } /** * Defini a posição de cada imagem, * para item. **/ #shared li.facebook a{ background-position: 0 0; } #shared li.twitter a{ background-position: -59px 0; } #shared li.favorite a{ background-position: -190px 0; } #shared li.email a{ background-position: -125px 0; } /** * CONFIGURAR SPAN QUE TERÁ O TEXTO QUE SERÁ EXIBIDO * Define um position:absolute; * Define uma largura(width) e altura(height); * Define um bottom:-60px, para fazer o efeito do tooltip está subindo; * Define left:50% e margin-left:-50px, para centralizar na horizontal; * Define border-radius:50%, pra transformar o elemento em um circulo; * Define opacity:0, para ocultar o elemento; * Define background, usando rgba, assim podemos definir o alfa, deixando a cor * transparente; * Define a cor do texto; * Define tamanho da fonte (font-size) e coloca ela em negrito (font-weigth); * Centraliza a o texto; * Define o line-height, da mesmo tamanho da altura, pra centralizar na vertical * o texto; * Define um bordar; * Define o efeito transition : * - all => total as propriedades * - 0.3 => tempo da transição * - ease-in-out => a forma da transição * Define o transform, usando scale pra diminuir a dimensão do span, * após passar o mouse, voltaremos ao tamanho natural */ #shared li a span{ position: absolute; width:100px; height:100px; bottom:-60px; left:50%; margin-left: -50px; border-radius: 50%; opacity: 0; background: rgba(255,255,255,0.5); color:#333; font-size:12px; font-weight: bold; text-align: center; line-height: 100px; border:1px solid #ccc; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -o-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); } /** * AO PASSAR O MOUSE O LINK * Define bottom:60px, pra ficar a cima do ícone; * Define opacity:1 pra mostrar o tooltip; * Define o transform, com scale(1), pra voltar o tamanho normal; */ #shared li a:hover span{ bottom:60px; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }Vamos ver com fica nosso HTML completo :
<!DOCTYPE html> <html> <head> <title>Tooltip com CSS 3</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <header> <h1>Tooltip com CSS 3</h1> </header> <ul id="shared"> <li class="facebook"><a href="#"><span>Facebook</span></a></li> <li class="twitter"><a href="#"><span>Twitter</span></a></li> <li class="favorite"><a href="#"><span>Favoritos</span></a></li> <li class="email"><a href="#"><span>Email</span></a></li> </ul> </body> </html>Veja como fica o efeito final: Clique Aqui
Espero que tenham gostado e até a próxima.