Question

我只是偶然发现了有关jQuery UI工具提示的问题。我添加了整个文档的工具提示并应用了一些样式：

$( document ).tooltip({
    position: {
        my: "center top+20",
        at: "center bottom",
        using: function( position, feedback ) {
            $( this ).css( position );
            $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        }
    }
});

现在，如果我将鼠标悬停在具有标题的项目上，则会显示工具提示。到现在为止还挺好。

问题是我有非常动态的内容，所以有时候一个元素会被另一个元素替换，而工具提示是可见的。导致问题的是，工具提示不会褪色。

我在这个小提琴中重现了这个问题：

http://jsfiddle.net/aE8qn/ ...只需点击第一个项目（鼠标停留在它上面）。移除项目后，将鼠标移开并将其移回。您会注意到旧的工具提示将保留，而现在的工具提示会在显示时覆盖它。

有一些解决方法吗？

Answer 1

您可以在删除旧内容时清除旧的工具提示。

$("#items").children().each(function(){
    this.onclick = function(){
        console.debug("test");
        this.remove();
        $(".ui-tooltip").remove();
    }
});

Answer 2

以防有人仍在寻找解决方案：

$( document ).tooltip({
    position: {
        my: "center top+20",
        at: "center bottom",
        using: function( position, feedback ) {
            /* fix tooltip not hiding problem */
            if($( ".ui-tooltip" ).length>1){
                // since the new tooltip is already added, there are now 2. 
                // removing the first one fixes the problem
                $( ".ui-tooltip" )[0].remove();
            }
            $( this ).css( position );
            $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        }
    }
});

小提琴：http://jsfiddle.net/aE8qn/1/

当内容发生变化时，jQuery工具提示会停留

2 个答案: