I -with some stackoverflow users help- have developed this tooltip script using Jquery and general Javascript,
Try this
$.fn.meliaTooltip = function(options){
return this.each(function(){
/*OPCIONES DEL PLUGIN*/
//var selector = '.disparador'; //elemento que activará el tooltip
//You can take all the below settings from options param
var tooltip = '.miTooltip'; //elemento con el contenido HTML a mostrar por el tooltip
var tiempo_espera = 0; //tiempo que el tooltip esperará a desaparecer una vez el raton se salga del disparador
var seguir_raton = true; //booleana que determina si el tooltip debe seguir el movimiento del raton o no
var ajuste_top = 0; //distancia vertical de ajuste
var ajuste_left = 0; //distancia vertical de ajuste
var fade_time = 300; //tiempo de la transición de mostrar/ocultar
/*ARCHIVOS NECESARIOS DEL PLUGIN - NO TOCAR*/
/* Detectar que el raton pasa por encima */
$(this).hover(function(e) {
/*Guardamos el selector del disparador y de tooltip en una variable*/
var disp = $(this);
var tip= disp.next(tooltip);
var tip_text = tip.html();
//alert(tip_text);
var new_content = ''+tip_text+'';
//alert(new_content);
tip.html(new_content);
if(typeof t != 'undefined'){
/*reiniciamos tiempo_espera*/
clearTimeout(t);
}
$(tip).css({
/*colocamos el tooltip según el ratón y el tamaño del tooltip*/
left: e.clientX-($(tip).width()/2)+ajuste_left+'px',
top: e.clientY-$(tip).height()*3/2+ajuste_top+'px'
}).fadeIn(fade_time);
});
/* En caso de que se mueva el raton */
$(this).bind('mousemove', function(e){
if(seguir_raton==true){
var disp = $(this);
var tip= $(this).next(tooltip);
$(tip).css({
/*Pues recolocamos el tooltip*/
left: e.clientX-($(tip).width()/2)+ajuste_left+'px',
top: e.clientY-$(tip).height()*3/2+ajuste_top+'px'
});
}
});
$(this).mouseout(function() {
/*añadimos tiempo_espera por si el usuario se sale sin querer*/
t = setTimeout("$('"+tooltip+"').fadeOut("+fade_time+")",tiempo_espera);
});
});
};
Usage
$("#testTooltip").meliaTooltip();