Animando Tooltip Con CSS y CSS3

a.tooltip {
position:relative;
color:#f90;
text-decoration:none;
}

a.tooltip div4 {
padding:5px 10px;
background:#fff;
border:1px solid #999;
border-radius:5px;
min-width:140px;
position:absolute;
top:5px;
left:5px;
color:#FFF;
text-align:center;
display:none;
font-family:Georgia, “Times New Roman”, Times, serif;
font-size:13px;
font-weight:bold;
}
a.tooltip div4:before {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #DEDEDE;
z-index:5;
content: ” “;
position:absolute;
top:-7px;
left:11%;
}
a.tooltip div4:after {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #DEDEDE;
display:block;
content: ” “;
position:absolute;
top:-8px;
left:11%;
}
a.tooltip:hover div4{
display:block;
background:-moz-linear-gradient(#DEDEDE 0%, #999 100%);
background:-ms-linear-gradient(#DEDEDE 0%, #999 100%);
background:-o-linear-gradient(#DEDEDE 0%, #999 100%);
background:-webkit-linear-gradient(#DEDEDE 0%, #999 100%);
background:linear-gradient(#DEDEDE 0%, #999 100%);
color:#fff;
left:40px;
top:25px;
}
a.tooltip div1 {
padding:5px 10px;
background:#fff;
border:1px solid #999;
border-radius:5px;
min-width:140px;
position:absolute;
left:40px;
top:25px;
color:#FFF;
text-align:center;
opacity:0;
font-family:Georgia, “Times New Roman”, Times, serif;
font-size:13px;
font-weight:bold;
}
a.tooltip div1:before {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #DEDEDE;
z-index:5;
content: ” “;
position:absolute;
top:-7px;
left:11%;
}
a.tooltip div1:after {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #DEDEDE;
display:block;
content: ” “;
position:absolute;
top:-8px;
left:11%;

}
a.tooltip:hover div1{
transition: all 3s;
background:-moz-linear-gradient(#DEDEDE 0%, #999 100%);
background:-ms-linear-gradient(#DEDEDE 0%, #999 100%);
background:-o-linear-gradient(#DEDEDE 0%, #999 100%);
background:-webkit-linear-gradient(#DEDEDE 0%, #999 100%);
background:linear-gradient(#DEDEDE 0%, #999 100%);
opacity:1;
color:#fff;
left:40px;
top:25px;
}
a.tooltip div2 {
padding:5px 10px;
background:#fff;
border:1px solid #999;
border-radius:5px;
min-width:140px;
position:absolute;
left:10px;
top:5px;
color:#FFF;
text-align:center;
opacity:0;
font-family:Georgia, “Times New Roman”, Times, serif;
font-size:13px;
font-weight:bold;
}
a.tooltip div2:before {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #DEDEDE;
z-index:5;
content: ” “;
position:absolute;
top:-7px;
left:11%;
}
a.tooltip div2:after {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #DEDEDE;
display:block;
content: ” “;
position:absolute;
top:-8px;
left:11%;

}
a.tooltip:hover div2{
transition: all 1s;
background:-moz-linear-gradient(#DEDEDE 0%, #999 100%);
background:-ms-linear-gradient(#DEDEDE 0%, #999 100%);
background:-o-linear-gradient(#DEDEDE 0%, #999 100%);
background:-webkit-linear-gradient(#DEDEDE 0%, #999 100%);
background:linear-gradient(#DEDEDE 0%, #999 100%);
opacity:1;
color:#fff;
left:10px;
top:25px;
}
a.tooltip div3 {
padding:5px 10px;
background:#f90;
border:1px solid #999;
border-radius:5px;
min-width:140px;
position:absolute;
left:10px;
top:5px;
color:#FFF;
text-align:center;
opacity:0;
font-family:Georgia, “Times New Roman”, Times, serif;
font-size:13px;
font-weight:bold;
}
a.tooltip div3:before {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #f90;
z-index:5;
content: ” “;
position:absolute;
top:-7px;
left:11%;
}
a.tooltip div3:after {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #f90;
display:block;
content: ” “;
position:absolute;
top:-8px;
left:11%;

}
a.tooltip:hover div3{
transition: all 1s;
background:-moz-linear-gradient(#F90 0%, #F30 100%);
background:-ms-linear-gradient(#F90 0%, #F30 100%);
background:-o-linear-gradient(#F90 0%, #F30 100%);
background:-webkit-linear-gradient(#F90 0%, #F30 100%);
background:linear-gradient(#F90 0%, #F30 100%);
opacity:1;
color:#fff;
left:10px;
top:25px;
}
#codigo{
background:#999;
color:#fff;
border:solid 1px #DEDEDE;
border-radius:5px;
padding:10px;
}

Tooltip con css

Ayer mirando la nueva actualización de facebook me llamo mucho la atencion las tooltip que tienen en su sitio web, muchos piensan que para hacer estas tooltip es una tarea difícil y por eso no quieren lanzarse hacerla.

El uso de tooltip en nuestro sitio web le da un toque más profesional y mucho más elegante a nuestras paginas, en este pequeño mini tutorial vamos a ver cómo crear esas tooltip con css y vamos también a aprender a animarlas con css3.

Un ejemplo de una tooltip animada puede ser esta Tooltip con CssTooltip con css y css3

  • Creando mi primera tooltip con css

    Lo primero como siempre es crear el documento HTML y enlazar la hoja de estilo css que vamos a utilizar o bien dentro de las etiquetas head abrir y serrar las etiquetas style y dentro escribir nuestro código css.

  • Primero veamos cómo funcionan las tooltip.

    Primera mente las tooltip es un texto personalizado y rediseñado que podemos poner dentro de un link o imagen para que el usuario pueda ver una descripción de lo que hay en ese link, esto suele ser muy utilizado en facebook para ver la información de un usuario al pasar el mouse por encima del nombre.

    Bueno sin más nada empecemos a crear nuestra primer tooltip con css

    Lo primero es la estructura de nuestro documento HTML y dentro creamos un div con un enlace y dentro de este enlace ponemos el nombre que queremos y vamos a crear otra etiqueta div o span la que tú prefieras.

<!DOCTYPE html>
<head>
<meta charset=”utf-8″ />
<title>Toltip con css y css3</title>
<body>
 <a class=”tooltip” href=”#”>
 <b>Tooltip con css
 <div>Esto es un Tooltip</div>
 </a>  
</body>
</html>

Y el código css para darle estilo seria.

a.tooltip {
    position:relative;   
    color:#f90;
    text-decoration:none;
}
a.tooltip div {
    padding:5px 10px;
    background:#fff;
    border:1px solid #999;
 border-radius:5px;
    min-width:140px;
    position:absolute;
    top:5px;
    left:5px;
    color:#FFF;
    text-align:center;
 display:none;  
    font-family:Georgia, “Times New Roman”, Times, serif;
    font-size:13px;
    font-weight:bold;
}
a.tooltip div:before {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #DEDEDE;
    z-index:5;
    content: ” “;
    position:absolute;
    top:-7px;
    left:11%;
}
a.tooltip div:after {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #DEDEDE;
    display:block;
    content: ” “;
    position:absolute;
    top:-8px;
    left:11%;
}
a.tooltip:hover div{
 display:block;
 background:-moz-linear-gradient(#DEDEDE 0%, #999 100%);
 background:-ms-linear-gradient(#DEDEDE 0%, #999 100%);
 background:-o-linear-gradient(#DEDEDE 0%, #999 100%);
 background:-webkit-linear-gradient(#DEDEDE 0%, #999 100%);
 background:linear-gradient(#DEDEDE 0%, #999 100%);
 color:#fff;
 left:40px;
    top:25px;
}

El resultado seria el siguiente.
Tooltip animado con CSS3 Tooltip con css3

Ahora si la queremos animada solo tenemos que cambiar display:none; y display:block; por opacity:0; y opacity:1; con esto lo que hacemos es desaparecer y aparecer el div pero con la propiedad css3 para poder darle animación.

Tooltip animado con CSS3 Tooltip con css3

Jugando con el código se pueden obtener distintos efectos de animación si le cambias la posición en pixeles tanto de left como top.

Tooltip animado con CSS3 Tooltip con css3

También puedes jugar cambiándole los colores superponiendo uno por encima del otro y que vallan apareciendo gradualmente.

Tooltip animado con CSS3 Tooltip con css3

Bueno espero y les haya gustado este pequeño mini-tutorial y nos vemos en la próxima entrada…

Ya saben para cualquier duda o sugerencia dejar un comentario o contactarnos directamente…

Comments

  1. By Anónimo

Deja un comentario

Tu dirección de correo electrónico no será publicada.