1

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

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

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

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

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

3 回答 3

2

有可能的。以下解决方案使用 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 框会被隐藏。

于 2012-07-03T14:24:06.400 回答
1

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

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

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

解决方案 ：

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

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

于 2010-11-29T09:16:43.137 回答
1

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

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

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

于 2010-11-19T01:46:21.623 回答