jQuery:如何删除技巧性提示? [英] jQuery: How to remove the tipsy tooltip?

问题描述

我通过.placeTaken类向div中添加了技巧性的工具提示.然后，用户可以在框中拖动框，因此我删除了该类并将其添加到新的div中.发生这种情况时，我向该div添加了一个新的提示工具提示，效果很好，但是我想删除旧的提示.

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

我在做什么错了?

我想我没有给你们足够的信息.我使用ajax来获取从数据库中获取的位置. PHP返回一个关联数组(客户)，然后在我的JavaScript中使用该数组，并与名称匹配.放置时，放置的位置会发生变化，因此我再次执行ajax函数，以使用所有放置的位置更新数组.首先，我将尖锐的工具提示添加到所有这样的地方

$("#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 />';
            }
        });
    }   
});

这一切都很好，所以我认为我只是将dropFromId标题更改为"，以便将其删除.

解决方案

使用$(".tipsy").remove();似乎可以解决问题，因为在显示工具提示时，将具有tipsy类的div附加到文档的正文中. /p>

只需确保您没有在其他地方使用tipsy类(即，将您的工具提示称为toolTip之类)

I add the tipsy tooltip to divs with the .placeTaken class. The user can then drag boxes around, so I remove the class and add it to a new div instead. When this happens, I add a new tipsy tooltip to that div and that works fine, but I want to remove the old one.

They say if you wish to remove the tooltip by setting the title attribute to an empty string, set the original-title attribute instead. I tried $("#"+dropFromId).attr("original-title", ""); but the tooltip is still there. I can't even change the tooltip title by setting another original-title.

What am I doing wrong?

Edit: I guess I didn't give you guys enough information. I use ajax to grab the places that are taken from the database. The PHP returns an associative array (customers) that I then use in my JavaScript where the taken place matches a name. The places that are taken changes when dropping, so I perform the ajax function again to update the array with all the taken places. At fist, I add the tipsy tooltip to all the taken places like so

$("#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 />';
    }
});

So the title is equal to what matches that place in the array. I hope that I am explaining this good enough. When the box is dropped in a new place, this is what happens

$("#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 />';
            }
        });
    }   
});

This all works fine, so I thought that I'd simply change the dropFromId title to "" on the drop, so that I remove it.

解决方案

Using $(".tipsy").remove(); seems to do the trick since a div with a tipsy class is appended to the body of the doc when the tooltip is shown.

Just be sure you don't use a tipsy class elsewhere (i.e. call your tooltip's something like toolTip instead)

这篇关于jQuery:如何删除技巧性提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！