Question

我正在使用jQuery创建工具提示，该工具提示通过Ajax请求获取工具提示内容，然后将其存储在变量中，这样每次鼠标悬停时Ajax都不会被激活。这一切都很有效，除非你在一个节点上快速滑动鼠标然后将它加载工具提示并显示它而不是像鼠标输出中那样隐藏它。

预期的活动顺序： 1.鼠标悬停 2. Ajax加载内容并将其放在隐藏的工具提示div中 3.将工具提示调整到节点的角落并显示 4.鼠标移出 5.工具提示在视图中隐藏

上述场景中看到的事件顺序： 1.鼠标悬停 2.快速鼠标移出 3.工具提示隐藏在视图之外 4. Ajax加载内容，工具提示显示在固定位置，直到你再次鼠标移除它为止。

这是适用的代码，显然有一个更大的对象，这是写的，但我认为你会得到主旨。

//Cancel code snippet
$('.tt').html();
$('.tt').hide();

//Tooltip init code snippet
$.ajax({
    type: "GET",
    url: "/tooltip/" + Tooltip.slug,
    dataType: "json",
    global: false,
    success: function(data) {
        $('.tt').html(data.description);
        Tooltip.init();
        $('.tt').attr("style","left:"+Tooltip.settings.left_offset+"px;top:"+Tooltip.settings.top_offset+"px");
        Tooltip.cache[slug] = data;
        $('.tt').show();
    }
});

Answer 1

hoverIntent插件可以避免意外的鼠标悬停。

添加代码以查看mouseout是否已触发。如果确实如此，则不要运行show（）部分。

Answer 2

不确定为什么需要来自服务器的工具提示。您可以使用jQuery Tooltip来实现相同的功能 Demo Page

希望这个帮助

Answer 3

我认为您应该检查您的成功句柄，看看当鼠标已经出来时您是否应该显示工具提示。

Answer 4

这种情况正在发生，因为当鼠标已离开节点时，ajax请求尚未完成。它只会做它的事情，等待服务器的响应，然后显示你的成功函数中定义的工具提示。

解决这个问题的一种方法是拥有一个变量，比如isHovering，其中包含当前正在悬停的节点。您可以使用节点的id：在悬停时立即将其添加到var中（在触发ajax函数之前），并在mouseout时将var设置为false。

然后，在你的ajax函数中，在渲染任何东西之前，检查var并只渲染它是否包含正确的id。

脱离我的头顶（未经测试）：

var isHovering = false;
$('.node').mouseover(function() {
      isHovering = $(this).attr('id');
}).mouseout(function() {
      isHovering = isHovering == $(this).attr('id') ? false : isHovering; //don't change if mouse on different node
});

然后在你的ajax（）函数中：

//Tooltip init code snippet
$.ajax({
    type: "GET",
    url: "/tooltip/" + Tooltip.slug,
    dataType: "json",
    global: false,
    success: function(data) {
        if(isHovering == $(this).attr('id')) {
           $('.tt').html(data.description);
           Tooltip.init();
           $('.tt').attr("style","left:"+Tooltip.settings.left_offset+"px;top:"+Tooltip.settings.top_offset+"px");
           $('.tt').show();
        }

        Tooltip.cache[slug] = data; //still cache it
    }
});

mouseout后触发jQuery Ajax鼠标悬停事件

4 个答案: