jquery - 如何使工具提示保持不变，以便可以单击其中的链接

Question

我有 jQuery 插件 Tooltipsy 来为链接生成工具提示。在此工具提示中，我还有其他指向相关对象的链接。如果我将鼠标移到它以单击链接，我希望它在初始链接上方弹出并停留。这可能吗？有谁知道该怎么做？

Answer 1

我没能让它保持打开状态，不能再等了，所以我改用另一个工具提示插件，称为simpletip，它提供了我需要的功能。

Simpletip 本身无法从链接中获取 title 属性，因此这是我用来实现此目的的代码。编辑：我将代码更改为采用数据标题（符合 HTML5）代替标题，这样我就不必阻止所有标题默认显示：

$(".order_tooltip").simpletip({
    fixed: true,
    position: 'top',
    onBeforeShow: function(){
        this.update(this.getParent().data('title'));
    }
});

Answer 2

您可以在工具提示中放置一个关闭按钮，并在单击关闭按钮时隐藏工具提示。

可以调用工具提示上的隐藏功能，如http://tooltipsy.com/methods.html#method-hide中所述

Answer 3

要直接回答您的原始问题，这对我有用：

var hoverHand = false;

    $('.hastip').tooltipsy({
            show: function (e, $el) {
                $el.hover( function() { 
                    hoverHand = true;
                }, function() {
                    hoverHand = false;
                });
                $el.fadeIn(100);
            },
            hide: function (e, $el) {
                var tooltipCloserInterval = setInterval(function(){
                    if (hoverHand == false) {
                        $el.fadeOut(100);
                        $el.off( "mouseenter mouseleave" );
                        clearInterval(tooltipCloserInterval);
                    }
                }, 500);
            }
        });

本质上，您给用户 500 毫秒的时间使用 setInterval 将鼠标移动到工具提示上。500 毫秒后，它会检查鼠标是否仍在工具提示上，如果不是，则关闭工具提示。