Criando Tooltip usando CSS3

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.