Tooltips animados con CSS

Esta es una forma de generar tooltips animadas, desarrollada por Alessio Atzeni y no sólo requiere CSS3 para ser implementada en cualquier sitio. Obviamente, como muchas de estas cosas, la animación no funcionará en todos los navegadores aunque el tooltip será visible sin problemas.

El HTML es sencillo, sólo es una lista ordenada dentro de un DIV:

<div id="masterpanel">
  <ul id="mainpanel">
    <li><a href="#" class="picasa"><small>abrir Picasa</small></a></li>
    <li><a href="#" class="stumble"><small>enviar a Stumble</small></a></li>
    <li><a href="#" class="twitter"><small>compartir en Twitterr</small></a></li>
    <li><a href="#" class="youtube"><small>el canal de YouTube</small></a></li>
    <li><a href="#" class="facebook"><small>compartir en Facebook</small></a></li>
  </ul>
</div>

Cada etiqueta LI contiene un enlace con una clase distinta y el contenido es el texto será el que vamos a ver en el tooltip.

Lógicamente, la clave es el CSS:

<style>
#masterpanel { /* este es contenedor principal */ }
#masterpanel ul { /* la lista */
  list-style: none;
  padding: 0;
  margin: 0;
}
#masterpanel ul li { /* cada item de la lista */
  padding: 0;
  margin: 0;
  position: relative;
}

/* este es el enlace */
#masterpanel ul li a {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 50% 0;
  text-decoration: none;
  margin: 0 5px; /* la separación entre ellos */
  float: left; /* uno al lado del otro */
  position: relative;
  padding: 0 20px;
  /* el tamaño de las imágenes */
  height: 60px;
  width: 60px;
}

/* las imágenes son los fondos de esos enlaces */
a.tpicasa {background-image: url(imagen1);}
a.tstumble {background-image: url(imagen2);}
a.ttwitter {background-image: url(imagen3);}
a.tyoutube {background-image: url(imagen4);}
a.tfacebook {background-image: url(imagen5);}

/* el texto del tooltip permanecerá oculto */
#masterpanel a small {
  background-color: Brown;
  border-radius: 10px;
  color: #FFF;
  display: none;
  font-size: 11px;
  line-height: 1;
  padding: 5px;
  text-align: center;
  width: 90px; /* es el ancho real del enlace */
}

/* el efecto hover hace visible al tooltip */
#masterpanel a:hover small { 
  display:block; 
  left: 0; 
  margin-top:-35px; 
  position:absolute; 
  top: 0;
  z-index:9999;
  /* la animación para Firefox y Chrome/Safari */
  -moz-animation:mymove .25s linear;
  -webkit-animation:mymove .25s linear; 
}

/* las reglas de la animación para cada uno de los navegadores */
@-moz-keyframes mymove {
  0%{ -moz-transform: scale(0,0); opacity:0;}
  50%{ -moz-transform: scale(1.2,1.2); opacity:0.3; }
  75%{ -moz-transform: scale(0.9,0.9); opacity:0.7;}
  100%{ -moz-transform: scale(1,1); opacity:1;}
}
@-webkit-keyframes mymove {
  0%{ -webkit-transform: scale(0,0); opacity:0;}
  50%{ -webkit-transform: scale(1.2,1.2); opacity:0.3;}
  75%{ -webkit-transform: scale(0.9,0.9); opacity:0.7;}
  100%{ -webkit-transform: scale(1,1); opacity:1;}
}
</style>

• abrir picasa
• enviar a stumble
• compartir en twitter
• el canal de youtube
• compartir en facebook