2011-09-01 60 views
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> 

回答

1

使用mouseentermouseleave事件,而不是mousemove