Jquery工具提示，就像下拉菜單

Question

我創建了一個jQuery插件來顯示工具提示。我想添加一個選項，toolitp將作爲下拉菜單。我的意思是，當我將光標移到工具提示上時，我可以點擊該工具提示中的鏈接。問題是，當我要將光標移到工具提示上時，他會消失，在這種情況下不受歡迎。

的JavaScript（example）：

(function($) { 

$.fn.jTooltip = function(options) { 

    var defaults = { 
     'location': 'right', 
     'menu': false, 
     'className': 'default', 
     'content': 'tooltip content', 
     'top': 0, 
     'left': 0, 
     'overlay': false, 
     'zIndex': 2000 
    }, 
     settings = $.extend({}, defaults, options); 
    this.each(function() { 
     var $this = $(this); 
     $this.mouseover(function() { 
      if (settings.menu) { 
       $(this).addClass('menu'); 
       $(document).on('mouseleave', '.show-tip', function() { 
        $(".tip-top").remove(); 
       }); 
      } 

      if (settings.location == 'bottom') { 
       thisCss = { 
        'top': $this.offset().top + $this.innerHeight() + 10 + settings.top, 
        'left': $this.offset().left + settings.left, 
        'z-index': settings.zIndex 
       }; 
      } 
      if (settings.location == 'right') { 
       thisCss = { 
        'top': $this.offset().top - $this.innerHeight() + 5 + settings.top, 
        'left': $this.offset().left + $this.innerWidth() + 5 + settings.left, 
        'z-index': settings.zIndex 
       }; 
      } 
      $('<div id="jTooltip" />').appendTo('body').html(settings.content).addClass(settings.className).css(thisCss); 
      if (settings.overlay) { 
       $('<div id="overlay" />').appendTo('body').css({ 
        'opacity': 0.5, 
        'background': '#000', 
        'position': 'absolute', 
        'left': 0, 
        'top': 0, 
        'z-index': 1000, 
        'width': '100%', 
        'height': '100%' 
       }); 
      } 
     }); 
     $(this).mouseleave(function() { 
      $("#jTooltip").remove(); 
     }); 
     return this; 
    }); 
}; 

})(jQuery); 
$('.show-tooltip').jTooltip({ 
    'location': 'bottom', 
    'menu': 'true' 
});​ 

Answer 1

我會給用戶一個或兩個進入上下文菜單，如果t他用戶進入上下文菜單，然後菜單保持或隱藏。

$(this).mouseleave(function() { 
       t = setTimeout(function() { 
        $("#jTooltip").remove(); 
       }, 2000); 
       $('#jTooltip').hover(function() { 
        clearTimeout(t); 
       }, function() { 
        $(this).remove(); 
       }); 
      }); 

小提琴 - http://jsfiddle.net/rWRV5/1/

Answer 2

您將需要添加任何你想要的命名選項....我稱之爲sticky

然後改變mouseleave到：

if(!settings.sticky){  
    $(this).mouseleave(function() { 
       $("#jTooltip").remove(); 
    }); 
}else{ 
    /* logic to remove when user interacts with dropdown or moves on to another tooltip element*/ 
    /* may need to check if a tooltip already exists in prior code and remove it before adding new one*/ 
    /* what you do will depend on UI you want when sticky is used*/ 

}