Animando Tooltip Con CSS y CSS3

Bootstrap Tooltip Usando Solo CSS

Ayer mirando la nueva actualización de facebook me llamo mucho la atención 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, ahora mismo con la llegada de boostrap todo esto se hace mucho mas dinámico y mucho mas fácil, pero en esta entrada vamos hacerlo del modo tracional ya que lo que quiero lograr con esto es que cada una de las personas que empiece a leer este post tenga una idea de como se hacen usando CSS directamente.

Mas adelante veremos esta tecnologia usando el Framework de Bootstrap ya que es una librería muy amplia y que está acaparando un gran mercado durante los últimos años.

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.