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.