0
我寫了一個工作至極Jquery tooltip plugin是:jQuery選擇鼠標懸停<select>停止,當我在一個<option>
(function ($) {
$.fn.meliaTooltip = function (options) {
var defaults = {
tooltip: '.miTooltip',
tiempo_espera: 0,
seguir_raton: true,
ajuste_top: 0,
ajuste_left: 0,
fade_time: 300,
bind_mode: 'click'
};
var opts = $.extend(defaults, options);
$(this).each(function() {
$(this).bind(opts.bind_mode,function(e) {
// alert('has hecho '+opts.bind_mode+' en '+$(this).attr('id'));
/*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();
var new_content = '<span class="melia_tooltip_left"></span ><span class="melia_tooltip_contenido">' + tip_text + '</span ><span class="melia_tooltip_right"></span ><span class="melia_tooltip_bottom"></span >';
tip.html(new_content);
if (typeof t != 'undefined') {
/*reiniciamos tiempo_espera*/
clearTimeout(t);
}
//alert('has hecho '+opts.bind_mode+' en '+disp.attr('id')+'y ahora vamos a mostrar'+tip_text+'que esta en '+tip.attr('class'));
$(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);
//alert(e.clientX - ($(tip).width()/2) + opts.ajuste_left);
//alert(e.clientY - $(tip).height() * 3/2 + opts.ajuste_top);
});
$(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);
$('#選擇ID).meliaTooltip({})工作正常,但是當我將鼠標放置的一個工具提示淡出的選項,我如何保留孩子的選擇器?
即使我是aplie到另一種標籤,例如:
<div id="selector"><div><div>Still work here</div></div>