I -with some stackoverflow users help- have developed this tooltip script using Jquery and general Javascript,
It should look like this:
(function ($) {
$.fn.meliaTooltip = function (options) {
var defaults = {
tooltip: '.miTooltip',
tiempo_espera: 0,
seguir_raton: true,
ajuste_top: 0,
ajuste_left: 0,
fade_time: 300
};
var opts = $.extend(defaults, options);
$(this).each(function() {
$(this).hover(function(e) {
/*Guardamos el selector del disparador y de tooltip en una variable*/
var disp = $(this);
var tip = disp.next(opts.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) + opts.ajuste_left + 'px',
top: e.clientY - $(tip).height() * 3 / 2 + opts.ajuste_top + 'px'
}).fadeIn(opts.fade_time);
});
$(this).bind('mousemove', function(e) {
if (opts.seguir_raton) {
var disp = $(this);
var tip = $(this).next(opts.tooltip);
$(tip).css({
/*Pues recolocamos el tooltip*/
left: e.clientX - ($(tip).width() / 2) + opts.ajuste_left + 'px',
top: e.clientY - $(tip).height() * 3 / 2 + opts.ajuste_top + 'px'
});
}
});
$(this).mouseout(function() {
/*añadimos tiempo_espera por si el usuario se sale sin querer*/
t = setTimeout("$('" + opts.tooltip + "').fadeOut(" + opts.fade_time + ")", opts.tiempo_espera);
});
});
};
})(jQuery);
usage:
$("#selector").meliaTooltip({
tooltip: '.miTooltip',
fade_time: 300
});