Question

我正在使用jQuery beauty tips（也使用hoverIntent plugin），我想在工具提示文本中显示一个href链接，并允许用户点击该链接。

然而，一旦我们离开锚点，toottip文本会在超时后消失（我们可以定义）

因此，只要用户光标位于锚点或工具提示文本上，我就会保持工具提示文本处于打开状态。

我该怎么做？有可能吗？我尝试过没有成功的事情：

$('.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方法就什么都不做。相反，当其自己的“hoverIntent out”触发时，BeautyTip框会被隐藏。

Answer 2

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

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

它有效（至少在Firefox上），但我更喜欢使用hoverintent。

Answer 3

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

然而，这种行为似乎是不合适的，因为如果鼠标上方的工具提示弹出窗口也应该在onmouseout上消失（如果在鼠标上定义了此类行为）。

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

解决方案：

我已经在外部容器中定义了一个虚拟类toolTipRange，其中popup的外观有效，并在post show事件中添加了以下代码

$（“。toolTipRange”）。bind（'mouseleave'，function（event）{
if（event.relatedTarget.nodeName！=“CANVAS”）{
that.btOff（）;
}
}）;

只要光标在工具提示文本上，如何使jQuery Beauty Tip保持打开状态？

3 个答案: