Tooltip Animado Con CSS

Desde hace algún tiempo tenía la idea de que mis enlaces de suscripción les faltaba algo. Necesitaba algo más llamativo.

Lo primero que se me ocurrió fue agregarle un Tooltip. Había visto muchos por ahí de todas las formas y con todas las librerías (AJAX, JavaScript, Jquery…). Pero yo en mi pretensión, quería uno que funcionara solo con CSS.

Un tooltip o descripción emergente es un texto que se muestra en un enlace al pasar el puntero del ratón por encima de este.

Después de «googlear» un poco, encontré un artículo en Codrops en el que describían uno tal y como yo lo quería; bonito, sencillo, fácil de implementar y con animación. Así que me puse a trabajar en eso, hice algunas modificaciones y… Volià! Aquí está, listo para aplicar al blog:

Empezamos con el HTML. En el post original usan una «lista desordenada» para crear los enlaces. Yo preferí no usar ningún tipo de lista. ¿Por qué? No sé.

<div id="suscribe" class="tt-wrapper">
<a href="#" ><img src="rss.png" border="0" /><span>RSS Feed</span></a>
<a href="#" ><img src="facebook.png" border="0" /><span>facebook</span></a>
<a href="#" ><img src="google.png" border="0" /><span>Goggle+</span></a>
<a href="#" ><img src="twitter.png" border="0" /><span>Twitter</span></a>
<a href="#" ><img src="youtube.png" border="0" /><span>YouTube</span></a>
</div>

Solo tienes que agregar los enlaces y la dirección de la imagen.

Ahora es el turno del CSS.

Primero definimos las propiedades básicas del contenedor. Los elementos estarán centrados y tendrán un espacio encima de 40px en donde irá nuestro tooltip. También definiremos la posición para que sea relativa.

#suscribe {
  padding-top:40px;
  text-align:center;
}
.tt-wrapper a{
  position: relative;
}

Ahora sí viene lo bueno. El contenido entre las etiquetas <span/> es lo que se mostrará en el tooltip. Le daremos el siguiente estilo:

.tt-wrapper a span{
  width: 80px;
  height: auto;
  margin-left: -50px;
  left: 50%;
  font-weight: 400;
  font-style: italic;
  font-size: 12px;
  color: #09f;
  text-align: center;
  border: 4px solid #eee;
  background: rgba(255,255,255,0.3);
  text-indent: 0px;
  border-radius: 5px;
  position: absolute;
  pointer-events: none;
  bottom: 70px;
  opacity: 0;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 -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;
}

El efecto que tendrá será el de aparecer desde arriba una vez pase el mouse por encima. Para esto se le ha dado el valor inicial de 0 a la propiedad opacity, y se ha alejado el elemento 70px de la base.

Ahora crearemos un pequeño triangulo que nos sirva de puntero usando los pseudo-elementos :before y :after.

.tt-wrapper a span:before,
.tt-wrapper a span:after{
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  margin-left: -9px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(0,0,0,0.1);
}
.tt-wrapper a span:after{
  bottom: -14px;
  margin-left: -10px;
  border-top: 10px solid #eee;
}

Finalmente, la magia. Haremos que nuestro tooltip baje y aparezca gradualmente.

.tt-wrapper a:hover span{
  opacity: 0.9;
  bottom: 50px;
}

Puedes verlo funcionando aquí mismo en el sidebar del blog.

5 comentarios

  1. Lion Gómez — 2 de julio de 2012, 10:03

    Amigo, realmente está muy pero muy interesante tu blog... sin embargo nosotros los pobres mortales desearíamos que el tutorial fuera más específico e indique en que lugar de la plantilla se deben insertar los elementos que compartes.

    Hago la sugerencia porque realmente haría tu blog más accesible a cualquier persona y puede aumentar tu tráfico...

    Un abrazo, muchos éxitos con esta joya de blog, está muy bueno.

    1. Erwin Andrés — 2 de julio de 2012, 14:37

      Gracias por tu comentario y tu sugerencia.

      Tienes razón, debería ser más especifico al momento de explicar. Es solo que trato de obviar lo más sencillo para no tener que repetirlo cada vez.

      Pero es realmente fácil: El CSS va entre las etiquetas <b:skin></b:skin> de tu plantilla. Y el HTML ve dentro de las etiquetas <body></body>

      De todas formas lo tendré en cuenta para la próxima entrada.

      Saludos, y gracias nuevamente.

    2. Lion Gómez — 5 de julio de 2012, 21:21

      Listo Amigo, agregado... luego te muestro como voy... ni decir que aprendiendo, pero si voy insertando :D

  2. Diego Gómez — 9 de julio de 2012, 20:16

    http://fanaticoweb.blogspot.com/

    Así voy... gracias por tu recurso.

    1. Erwin Andrés — 10 de julio de 2012, 15:12

      Buen blog, te está quedando muy bien. Sigue así.