1

我刚刚偶然发现了一个关于 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/ ...只需单击第一项(将鼠标停留在其顶部)。删除该项目后,将鼠标移开并移回该项目。您会注意到旧的工具提示将保留,而现在的工具提示会在显示时覆盖它。

有一些解决方法吗?

4

2 回答 2

2

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

$("#items").children().each(function(){
    this.onclick = function(){
        console.debug("test");
        this.remove();
        $(".ui-tooltip").remove();
    }
});
于 2013-10-29T11:37:13.017 回答
0

以防万一有人仍在寻找解决方案:

$( 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/

于 2015-09-28T15:22:46.770 回答