Hoy estaba mirando el nuevo diseño del blog cuando se me ocurrió una idea que, aunque no sé si la implementaré definitivamente, puede ser muy útil.

Es un tooltip:

Hay varios plugins para esto, pero ninguno me convenció, así que hice una función básica para hacer cosas como la que habéis visto.

Para usarlo hay que tener instalado jQuery, como supondréis, y luego pegar entre etiquetas script el código que elijáis. He hecho dos versiones:

El html

Es un contenedor (que puede ser un link, un span, etc…) con un div/span con clase «tooltip» dentro, que aparecerá cuando paséis el ratón por encima. Un ejemplo:

<div>Texto que se veerá<span class="tooltip">contenido que aparecerá</span></div>

El CSS

No es necesario para nada más que la personalización. Aún así, recomiendo ocultarlo con display:none; por si el Javascript tarda en cargar.

Os dejo el que he usado yo aquí:

.tooltip{
 display:none;
 background:#f4f4f4;
 border-radius:3px;
 box-shadow:0 0 3px rgba(0,0,0,.4);
 border:3px solid #369;
 color:#2c2c2c;
 text-decoration:none;
 padding:5px;
}

Versión básica

En ésta sólo podemos hacerlos hacia arriba y centrados, pero claro, pesa menos. Aquí tenéis el código comentado:

<script>
jQuery(function($){
 $('.tooltip').hide();
 $(':has(".tooltip")').hover(
 //Cuando entra el ratón
 function(){
  var tooltipcontainer=$(this);//Donde estará el tooltip
  var tooltip=$(this).children('.tooltip');//El tooltip
  if(tooltipcontainer.parent().css('position')=='static'){tooltipcontainer.parent().css('position','relative')};
  //Ponemos la altura automática para calcularla
  //No se ve porque el la opacidad está a 0
  tooltip.css({'display':'block','opacity':0,'height':'auto','position':'absolute'}); 
  //Calculamos la altura
  var tooltipheight=tooltip.height();
  //Lo posicionamos verticalmente, de tal manera que no importen padding y margin
  var bottom=tooltipcontainer.parent().outerHeight()-tooltipcontainer.position().top-parseInt(tooltipcontainer.css('margin-top'),10)+separararriba;
  //Ahora lo posicionamos horizontalmente. Ahí estará centrado.
  var left=tooltipcontainer.position().left+parseInt(tooltipcontainer.css('marginLeft'),10)+(tooltipcontainer.outerWidth()/2)-(tooltip.outerWidth()/2);
  //Lo configuramos para que no se vea, para animar altura y opacidad
  tooltip.css({'height':'0px','opacity':'0','bottom':bottom,'left':left});
  //Animamos
  tooltip.animate({opacity:'1', height:tooltipheight});
 },//Cuando sale el ratón
 function(){
  //Definimos otra vez las variables que usamos y lo animamos
  var tooltipcontainer=$(this);
  var tooltip=$(this).children('.tooltip');
  tooltip.fadeOut("slow");
 });
});
</script>

Versión avanzada

Ésta sólo es una serie de condicionantes para variar la posición. Podéis cambiarla poniendo distintas clases. Por ejemplo: Si el tooltip lo escribís así <span>Texto que se ve<span class="tooltip abajo derecha">...Lo que va dentro...</span></span> obtendréis:

Si queréis información sobre esto podéis ver el código de la demo.

Actualización: No me acordaba ya de este post, pero realicé una actualización importante y no la publiqué: está aquí abajo

<script type="text/javascript">
$('.tooltip').hide();
$(function(){
 $('.tooltip').parent().hover(
  //Cuando entra el ratón
  function(){
   var separararriba = separarabajo = separarderecha = separarizquierda = 3,
    tooltipcontainer = $(this),
    tooltip = tooltipcontainer.children('.tooltip'),
    tooltipheight, bottom,
    top = tooltipcontainer.position().top+parseInt(tooltipcontainer.css('margin-top'),10),
    left = tooltipcontainer.position().left+parseInt(tooltipcontainer.css('margin-left'),10);

   tooltip.css({'display':'block','opacity':0,'height':'auto','position':'absolute','margin':0}); 
   
   tooltipheight = tooltip.height();
   
   if(tooltipcontainer.parent().css('position') === 'static'){tooltipcontainer.parent().css('position','relative');};
   
   if (tooltip.hasClass('derecha')){
    left += tooltipcontainer.outerWidth() + separarderecha;
   } else if (tooltip.hasClass('izquierda')){
    left -= tooltip.outerWidth() + separarizquierda;
   } else {
    left += (tooltipcontainer.outerWidth()/2)-(tooltip.outerWidth()/2)
   }
   
   
   if(tooltip.hasClass('abajo')){
    top += tooltipcontainer.outerHeight()+separarabajo;
   }else if (tooltip.hasClass('centro')){
    top += tooltipcontainer.outerHeight()/2-tooltip.outerHeight()/2;
   } else {
    bottom = tooltipcontainer.parent().outerHeight() - tooltipcontainer.position().top - parseInt(tooltipcontainer.css('margin-top'),10) + separararriba;
   }
   
   if( bottom ){
    tooltip.css({'height':'0px','opacity':'0','bottom':bottom,'left':left});
   }else{
    tooltip.css({'height':'0px','opacity':'0','top':top,'left':left});
   }
   //Animamos
   tooltip.animate({opacity:'1', height:tooltipheight});
  },
  //Cuando sale el ratón
  function(){
   //Definimos otra vez las variables que usamos y lo animamos
   var tooltip = $(this).children('.tooltip');
   tooltip.fadeOut("slow");
  }
 );
});</script>

Demo y descarga

Nota: Al poner los tooltips arriba toma una posición relativa, así que da problemas en contenedores muy (extremadamente) pequeños. Tenedlo en cuenta, intentaré arreglarlo lo antes posible.

Actualizado!! El problema no era de eso, sino que los divs que podemos poner para, por ejemplo, centrarlos, tienen position:static, lo que impide al tooltip posicionarse correctamente. Solo añadí una línea:

 if(tooltipcontainer.parent().css('position')=='static'){tooltipcontainer.parent().css('position','relative')};