如何让 jQuery Beauty Tip 在光标位于工具提示文本上方时保持打开状态？

Question

我正在使用 jQuery 美容技巧 （它也使用 hoverIntent 插件），我想在工具提示文本内显示一个 href 链接并允许用户单击该链接。

但是，一旦我们离开锚点，提示文本就会在超时（我们可以定义）后消失，

所以只要用户光标位于锚点或工具提示文本上，我就希望保持工具提示文本打开。

我怎样才能做到这一点？这可能吗？我尝试过，但没有成功，类似：

$('.bt').bt({
postShow: function(box) {
  $(".bt-content").hoverIntent({
    timeout : 500,
    over: function() {
      $(".bt-wrapper").show(); //or $(".bt-active").btOn();
    }
  });
}
})

Answer 1

这是可能的。以下解决方案使用 jQuery 1.7 和hoverIntent r5。我在 Chrome、Safari、FF 3.7、FF 7 和 IE8 中进行了测试。

$('.bt').bt({
    postShow: function(box) {
        $(box).hoverIntent({
            over: function() {
                    $(this).data('hasmouse', true);
            },
            out: function() {
                    $(this).data('hasmouse', false);
                    $(box).hide();
            },
            timeout: 300,
        });
    },
    hideTip: function(box, callback) {
        if ($(box).data('hasmouse')) {
            return;
        }
        $(box).hide();
        callback(); 
    },
});

我再次使用hoverIntent，这次是在BeautyTip 框中，设置一个标志（“data-hasmouse”），指示鼠标光标是否仍悬停在工具提示上。只要设置了该标志，新的 hideTip 方法就不会执行任何操作。相反，当 BeautyTip 框自己的“hoverIntent out”触发时，它会被隐藏。

Answer 2

这是迄今为止我能做的最好的事情：
将这些代码添加到提示的选项中。

trigger: ['mouseenter','click'],
postShow: function(box){
  var that = this;
  $(box).bind('mouseleave',function() {
     that.btOff();
  });
},

它可以工作（至少在 Firefox 上），但我更喜欢使用悬停意图。

Answer 3

您好，感谢 Chris Cinelli 的上述回复。然而，上述解决方案的问题是，当我们离开锚点时，工具提示仍然存在，只有在页面外单击才会触发其关闭。

然而，这种行为似乎不正确，因为如果鼠标悬停时弹出工具提示，那么鼠标悬停时也应该消失（如果行为是在鼠标悬停时定义的）。

因此，为了实现这种行为，我对 chris cinelli 提供的解决方案进行了额外的更改。

解决方案：

我已为外部容器定义了一个虚拟类 toolTipRange，其中弹出窗口的外观有效，并在 post show 事件

$(".toolTipRange").bind('mouseleave',function(event) {< br>
  if(event.latedTarget.nodeName != "CANVAS") {
   that.btOff();
  }
});