jQuery: 如何移除tipsy工具提示？

Question

我将tipsy工具提示添加到具有“.placeTaken”类的div中。然后用户可以拖动框，因此我删除该类并添加到新的div中。当这种情况发生时，我会向该div添加一个新的tipsy工具提示，这很好用，但是我想移除旧的工具提示。

他们说如果您希望通过将title属性设置为空字符串来删除工具提示，则应设置original-title属性。我尝试了$("#"+dropFromId).attr("original-title", "");，但是工具提示仍然存在。我甚至不能通过设置另一个original-title来更改工具提示标题。

我做错了什么？

编辑：我想我没有给你们足够的信息。我使用ajax从数据库中获取被占用的位置。 PHP返回一个关联数组（客户），我在JavaScript中使用它，在其中占用的位置匹配一个名称。占用的位置在放置时会发生变化，因此我再次执行ajax函数以更新包含所有占用位置的数组。首先，我像这样将tipsy工具提示添加到所有占用位置

$("#map div.placeTaken").tipsy({gravity: 'w', html: true, fade: true, title:
    function(){
        // id could for example be map74, substring to 74
        var id = $(this).attr("id").substring(3,6);
        return '<div>'+customers[id]+'</div><br />';
    }
});

因此，标题与数组中对应位置的内容相等。希望我表述得足够清楚。当拖放框到一个新位置时，就会发生这种情况。

$("#map div span").bind( "dragstop", function(event, ui) {
        // some code here to change the .placeTaken class       
        // update database with the new place
        $.ajax({
            type: "POST",
            url: "map.php",
            data: "dropFromId="+ dropFromId.substring(3,6) +"& dropToId="+ dropToId.substring(3,6),
            success: function(){
            // ajax function to update the js array with new places
            customerTooltip(); 
            }
        });

        // on this place, add tooltip
        $("#"+dropToId).tipsy({gravity: 'w', html: true, fade: true, title:
            // funktion för att avgöra vilken title som ska användas
            function(){
                var id = dropToId.substring(3,6);
                return '<div>'+customers[id]+'</div><br />';
            }
        });
    }   
});

这一切都很好，所以我想简单地将drop的dropFromId标题更改为""，以便我可以将其删除。

- Charles

---

你能提供一些展示问题的样例代码吗？ - Brandon Boone

你应该发布你的HTML代码，因为工具提示来自title属性，除非你使用了一些自定义属性。 - Sarfraz

Answer 1

使用 $(".tipsy").remove(); 看起来就可以解决问题，因为当显示工具提示时，一个带有 tipsy 类的 div 会被附加到文档的 body 中。

只需确保您不在其他地方使用 tipsy 类（例如，将您的工具提示命名为 toolTip）。

- iwasrobbed

Answer 2

去除醉酒感的最简单方法；

$('.tipsy:last').remove();

- merkdev

---

非常方便，如果您有一个带有tipsy指定的按钮，当鼠标悬停在按钮上时，tipsy工具提示将出现，然后单击按钮，tipsy将被上面的代码隐藏。谢谢！ - Avatar

Answer 3

如果您不想再显示tipsy，请在元素上使用.tipsy('disable')。

如果您正在使用trigger: manual，并且想要隐藏它，您只需要在body中删除.tipsy div。

还有disable、enable和toggleEnabled。

- Clarence Liu

Answer 4

$("#"+dropFromId)[0].setAttribute('original-title', '')

- Tahir Akhtar

---

这是正确的，也是tipsy作者在http://onehackoranother.com/projects/jquery/tipsy/#options中建议的方法。 - Sam

这是正确的，应该是最佳答案。 - Avatar

Answer 5

$("#tipsyfiedElement").unbind('mouseenter mouseleave'); // Or whatever event trigger the tiptool

- Paul

Answer 6

我使用的更简单的方法：

$('body').find('.tipsy').each(function(){
    $(this).remove();
});

- Alberto Sanz

Answer 7

我在谷歌上搜索了一个禁用Tipsy的情况后看到了这个问题，原因是在移动设备（特别是iPad上）涉及到触摸/点击事件时很复杂。

我决定实施的解决方案是在jquery.tipsy.js文件的顶部添加一个小测试。

要在触摸（移动）设备上禁用Tipsy： var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch ||
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/) ||
deviceAgent.match(/(iemobile)/) ||
deviceAgent.match(/iphone/i) ||
deviceAgent.match(/ipad/i) ||
deviceAgent.match(/ipod/i) ||
deviceAgent.match(/blackberry/i) ||
deviceAgent.match(/bada/i));

function Tipsy(element, options) {
    this.$element = $(element);
    this.options = options;
    this.enabled = !isTouchDevice;
    this.fixTitle();
};

查看：检测用户代理是否支持触摸的最佳方法

- j7m

Answer 8

我最近遇到了这个问题，以下是我的解决方法：

使用以下代码将 original-title 属性设置为 'stop'：

$('.myElement').attr('original-title','stop');

然后，在jquery.tipsy.js中将代码更改为以下内容：

...
} else if (typeof opts.title == 'function') {
    title = opts.title.call(this);
}

if (title != 'stop') {    //line 32
    ...
    ...
}                         //line 62
...

在我的发布版本（0.1.7）中，新增的代码从第32行开始，到第62行结束。Tipsy 应该会看到你的 title 属性等于“stop”，并且不会尝试打开工具提示。

此外，这会向控制台输出一些错误。虽然这没有任何影响，但如果你想摆脱它，可以在第73行添加以下内容（在添加先前的代码之后）。

try { tip.remove(); } catch(err){}

POW

- BrickSquad

Answer 9

使用：.unbind('mouseenter mouseleave');来移除tipsy方法。

- Steven Benjamin