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.