TooltipText con CSS3

tootip text

by JavaFace

HTML

<div class='contenedor'>
<!--INICIO-->

<!--1-->
<a class="tooltip" href="#">Blogger
 <span>
<img src="https://lh6.googleusercontent.com/_NNS6r_z4aeg/Tc8G8kZwj4I/AAAAAAAAUn8/Mqe4cHhRsIc/blogger-32x32.png" />
  Blogger es un servicio creado por PyraLabs
 </span>
</a>

<!--2-->
<a class="tooltip" href="#">Wordpress
 <span>
  <img src="http://gamerchants.com/images/icon-wordpress-32x32.png" />
    WordPress es un sistema de gestión de contenido 
 </span>
</a>

<!--FIN-->
<div>

CSS

.tooltip {
 position: relative;
 display: inline-block;
}

.tooltip span {
 background: #54b8f2;
 border: 4px solid #54b8f2;
 bottom: 30px; /** Aumentar para mayor efecto **/
 border-radius: 6px;
 color: white;
 font-size: 13px;
 left: 50%;
 line-height: 16px;
 margin-left: -88px;
 opacity: 0;
 padding: 8px;
 position: absolute;
 text-align: center; /* Texto centrado */
 /** Transiciones **/
-webkit-transition:0.2s;
 -moz-transition:0.2s;
  -o-transition:0.2s;
   transition:0.2s;
 visibility: hidden;
 width: 150px; /**Ancho**/
}
.tooltip span img{
	float:left;
	border:none;
	margin-left:auto;
	margin-right:auto;
}

a:hover.tooltip span {
 bottom: 50px; /*distancia del vinculo al tooltip*/
 opacity: 1;
 visibility: visible;
 z-index: 100;
}

/**Flecha del tooltip**/
 .tooltip span:after {
  bottom: -14px;
  border-left: 10px solid transparent;
  border-top:10px solid #54b8f2;
  border-right: 10px solid transparent;
  content: '';
  height: 0;
  left: 50%;
  margin-left: -9px;
  position: absolute;
  width: 0;
 }
 .contenedor{
	 text-align:center;
	 margin-left:auto;
	 margin-right:auto;
	 width:35%;
	 position:absolute;
	 top:25%;
 }
 .contenedor a{
     display: inline; 
	 padding:5px 15px;
     margin:0 5px;
	 text-align:center;
	 font-family:Georgia, "Times New Roman", Times, serif;
	 font-size:18px;
	 color:#090600;
	 text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
	 text-decoration:none;
	 background-color: rgba(34,141,224, 0.6);
     background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
     background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
     background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
     background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
     background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	 -moz-border-radius: 4px;
     border-radius: 4px; 
	 border:1px solid #090600;
 }