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

您需要添加您想要的任何命名选项....我将其称为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*/

 }

Answer 2

如果用户进入上下文菜单，菜单会停留或隐藏，我会给用户一两秒钟进入上下文菜单。

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

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

Jquery工具提示就像下拉菜单一样

2 个答案: