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

【问题标题】：jquery create a tooltip that does not disappearjquery创建一个不会消失的工具提示
【发布时间】：2010-10-21 04:50:12
【问题描述】：

我希望构建一个工具提示，允许用户单击该工具提示中的链接，以便他们导航到网站的各个部分。我的问题是当我用鼠标离开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 时才会消失，从而允许用户实际输入工具提示不会消失。

【问题讨论】：

您希望工具提示保持焦点，除非用户将焦点留在锚点或工具提示本身。不要给我一个停留在页面上方并让我执行一个动作离开的工具提示。如果我在滚动时不小心将鼠标悬停在某个东西上，当它停留在页面上时我会很生气。
中肯的评论，但是在我改变悬停在上面的 a 之前，我将如何保持它的专注？
也许找到一个工具提示扩展比编写这个更容易。（即：flowplayer.org/tools/tooltip/index.html）
@Detect 我已经使用了您的解决方案，但是遇到了一点麻烦，工具提示没有显示，这是因为我通过 ajax 填充了工具提示吗？请查看我编辑的 javascript。

标签： javascript jquery css ajax

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

正如 Chris 所说，这可能会让用户感到沮丧。

【讨论】：