用setTimeout和clearTimeout設置行爲？

Question

我創建了一個JQuery工具提示插件，但我有一個問題。

我需要能夠通過工具提示移動鼠標...

我試着與setTimeout和clearTimeout但沒有運氣這項工作。

我這裏有一個工作版本：http://www.codepen.io/mdmoura/pen/KdyJH

重要的代碼是在鼠標的結尾輸入事件和鼠標離開事件。

這裏是插件代碼：

// JQuery 
(function ($) { 

    // Tooltip 
    $.fn.Tooltip = function (options) { 

    var defaults = {   
     class: 'Tooltip', 
     content: '', 
     delay: [200, 200], 
     cursor: false, 
     offset: [0, 1], 
     hide: function ($element, $tooltip) { 
     $tooltip.fadeOut(200); 
     }, 
     show: function ($element, $tooltip) { 
     $tooltip.fadeIn(200); 
     } 
    }; 

    var options = $.extend({}, defaults, options); 

    var identity = "Tooltip_" + Math.floor(Math.random() * (9999 - 2000 + 1) + 2000); 

    var info = { ready: false, shown: false, timer: null, title: '' }; 

    $(this).each(function (e) {  

     var $this = $(this); 
     info.title = $this.attr('title') || ''; 

     // Mouse enter   
     $this.mouseenter(function (e) {     

     if (info.ready) { 

      var $tooltip = $("#" + identity); 

     } else { 

      var $tooltip = $("<div>").attr("id", identity).attr("class", options.class).appendTo('body'); 

      $tooltip.html(options.content != '' ? (typeof options.content == 'string' ? options.content : options.content($this, $tooltip)) : this.title); 

      info.ready = true; 
      $this.attr('title', ''); 

     } 

     if (options.cursor) { 

      var position = [e.clientX + options.offset[0], e.clientY + options.offset[1]]; 

     } else { 

      var coordinates = $this[0].getBoundingClientRect(); 

      var position = [ 

      (function() { 

       if (options.offset[0] < 0) 
       return coordinates.left - Math.abs(options.offset[0]) - $tooltip.outerWidth(); 
       else if (options.offset[0] === 0) 
       return coordinates.left - (($tooltip.outerWidth() - $this.outerWidth())/2); 
       else 
       return coordinates.left + $this.outerWidth() + options.offset[0]; 

      })(), 

      (function() { 

       if (options.offset[1] < 0) 
       return coordinates.top - Math.abs(options.offset[1]) - $tooltip.outerHeight(); 
       else if (options.offset[1] === 0) 
       return coordinates.top - (($tooltip.outerHeight() - $this.outerHeight())/2); 
       else 
       return coordinates.top + $this.outerHeight() + options.offset[1]; 

      })() 

      ]; 

     } 

     $tooltip.css({ left: position[0] + 'px', top: position[1] + 'px' }); 


     // HERE THE TOOLTIP IS DISPLAYED 
     timer = window.setTimeout(function() { 
      options.show($this, $tooltip.stop(true, true)); 
     }, options.delay[0] || 0); 


     // THIS IS THE EVEN WHEN THE MOUSE MOVES OVER THE TOOLTIP. 
     // IT SHOULD CANCEL THE HIDE CALL OF THE TOOLTIP. 
     // AFTER THE MOUSE MOVES AWAY FROM THE "A" TAG THERE SHOULD BE A DELAY. 
     // THE DELAY WOULD ALLOW THE MOUSE TO MOVE TO THE TOOLTIP. 
     // IN THAT CASE THE HIDE CALL SHOULD BE CANCELED. 
     $("#" + identity).mouseenter(function() { 
      window.clearTimeout(timer); 
      timer = null; 
     }); 

     // HERE THE TOOLTIP GETS HIDDEN WHEN THE MOUSE MOVES AWAY FROM IT 
     $("#" + identity).mouseleave(function() { 
      timer = setTimeout(function() { 
      options.hide($this, $tooltip); 
      }, options.delay[1]); 
     }); 

     }), // Mouse enter 

     // HERE THE TOOLTIP GETS HIDDEN WHEN THE MOUSE MOVES AWAY FROM THE "A" TAG 
     // WHEN THE MOUSE MOVES OVER THE TOOLTIP THIS SHOULD BE CANCELED. 
     $this.mouseleave(function (e) { 
     window.clearTimeout(timer); 
     timer = null; 
     options.hide($this, $("#" + identity).stop(true, true)); 
     }) // Mouse leave    

    }); // Each 

    }; // Tooltip 

})(jQuery); // JQuery 

請記住，我在工作示例： http://www.codepen.io/mdmoura/pen/KdyJH

Answer 1

在鏈接的mouseleave你必須設置超時隱藏工具提示（使其贏得了」不會立即隱藏，您需要一些時間來將其懸停），並且在工具提示的mouseenter上，您必須清除該超時值，以便它不會因此隱藏（您已經完成了第二部分）。

檢查：

http://www.codepen.io/anon/pen/lagLb