Como personalizar o tooltip com CSS
23/09/2013 - Escrito por: Felipe Mitamura Hatanaka
Passe o cursor do mouse em cima da imagem!
Leia os artigos da Agência WEB Hatanaka!
Para quem não sabe o que é o tooltip, vou explicar, é aquela moldura pop up que abre quando você passa o mouse sobre um elemento da interface (normalmente uma palavra em um texto) e que contém uma explicação adicional sobre aquele elemento que recebeu o ponteiro do mouse sobre ele.
Neste artigo vou mostrar um jeito mais simples, porém elegante, de mostrar um tooltip sem ter que utilziar bibliotecas prontas como bootstrap (apesar de serem muito boas). O código CSS para fazer este efeito é o seguinte:
a.tooltip {
outline:none;
text-decoration:none;
}
a.tooltip strong {
line-height:30px;
}
a.tooltip > span {
width:200px;
padding: 10px 20px;
margin-top: 20px;
margin-left: -85px;
opacity: 0;
visibility: hidden;
z-index: 10;
position: absolute;
font-family: Arial;
font-size: 12px;
font-style: normal;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 2px 2px 2px #999;
-moz-box-shadow: 2px 2px 2px #999;
box-shadow: 2px 2px 2px #999;
-webkit-transition-property:opacity, margin-top, visibility, margin-left;
-webkit-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;
-webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
-moz-transition-property:opacity, margin-top, visibility, margin-left;
-moz-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;
-moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
-o-transition-property:opacity, margin-top, visibility, margin-left;
-o-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;
-o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
transition-property:opacity, margin-top, visibility, margin-left;
transition-duration:0.4s, 0.3s, 0.4s, 0.3s;
transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
}
a.tooltip:hover > span
{
opacity: 1;
text-decoration:none;
visibility: visible;
overflow: visible;
margin-top:50px;
display: inline;
margin-left: -60px;
}
a.tooltip span b {
width: 15px;
height: 15px;
margin-left: 20px;
margin-top: -19px;
display: block;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: inset -1px 1px 0 #fff;
-moz-box-shadow: inset 0 1px 0 #fff;
-o-box-shadow: inset 0 1px 0 #fff;
box-shadow: inset 0 1px 0 #fff;
display: none\0/;
*display: none;
}
a.tooltip > span {
color: #4D4D4D;
background: #FFFFFF;
background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#FFFFFF));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FFFFFF',GradientType=0 );
border: 1px solid #F6F6F6;
}
a.tooltip span b {
background: #FFFFFF;
border-top: 1px solid #F6F6F6;
border-right: 1px solid #F6F6F6;
}
Para quem nunca viu, o sinal de maior '>', no caso do código acima, significa que somente elementos span que sejam descendentes diretos do elemento a esquerda, que é o link juntamente com a classe (a.tooltip) serão afetados pela regra (código).
No CSS foram utilizadas propriedades como box-shadow (para fazer o efeito de sombra), transform (para delocar o elmente em um determinado ângulo) e transition (para o efeito de movimento). Pode-se observar que sempre estas propriedades do css estão acompanhadas de mais duas linhas com alguma variação, isto ocorre para adpta-las aos diferentes tipos de navegadores.
O próximo passo é criar o código html, para isso basta adicionar a classe em algum elemento a (link) e escrever o texto e/ou colocar imagens dentro do span, ou seja, tudo que estiver dentro do span será exibido somente na pop up (no tooltip).
Código HTML:
Leia os artigos da Agência WEB Hatanaka!
Caso tenham alguma dúvida ou sugestão deixem seu comentário. E se gostou da um curtir!