Question

我希望构建一个工具提示，允许用户点击该工具提示中的链接，以允许他们导航到网站的各个部分。我的问题是当我用鼠标离开a时，工具提示会消失？我想要的是工具提示消失，如果我更改为新的a或点击工具提示上的关闭，我的jquery如下所示，

    $(document).ready(function() { 

    /*
     * Rollover jobwall logo and show job tooltip
     */
     $('ul#jobs li a').mouseenter(function(){
            var $this = $(this);
            $this.addClass('active');
            $.ajax({
                type: 'POST',
                url: '/jobwall/job_tooltip',
                data: 'employer_id='+$(this).attr('rel'),
                success:function(html) {
                    //alert($this);
                    $this.tooltip({ effect: 'slide'});
                }
            });
        }).mouseleave(function(){
            $(this).removeClass
            $('#tooltip').remove();
        });


});

如何在鼠标输入a按钮时显示工具提示只有在用户通过单击关闭按钮关闭它或者移动到允许用户的新a时才会消失实际进入工具提示而不会消失。

Answer 1

我会查看hoverintent而不是mouseenter和mouseleave。

在鼠标离开事件中，您需要检查鼠标是否位于工具提示中。如果没有，你可以关闭它。

Answer 2

将$('#tooltip').remove();移动到mouseenter函数的顶部应该可以解决问题。当鼠标离开时，这不会删除工具提示，如果在输入新的a时存在，则会将其删除。这假定1）您已经有一个关闭函数，2）$('.active').append(html);创建#tooltip。

正如克里斯评论的那样，这可能让用户感到沮丧。

jquery创建一个不会消失的工具提示

2 个答案: