jQuery UI工具提示小部件留下不需要的标记。

when I call the Tooltip widget of jQuery UI in this way http://jsfiddle.net/xvMBU/5/ and on hover when tooltip hides not all of its html is removed from the page - this is left behind:

当我以这种方式调用jQuery UI的工具提示小部件时，当工具提示隐藏并不是所有的html都从页面中删除时，它将被留在后面:

<div class="ui-effects-wrapper" style="font-size: 100%; background-color: transparent; border: none; margin: 0px; padding: 0px; width: 64px; height: 42px; float: none; position: absolute; z-index: 9999; top: -11px; left: 0px; bottom: auto; right: auto; background-position: initial initial; background-repeat: initial initial;"></div>

I try this in Chrome and FF v18.0.1. I forgot to mention that this happens when you do it fast.

我在Chrome和FF v18.0.1中尝试过。我忘了说这是发生在你做得快的时候。

2 个解决方案

#1

A simple workaround:

一个简单的解决方法:

Working Example

工作示例

$('#myTooltip').tooltip({
    "items": "#myTooltip",
        "tooltipClass": "gr-t-tooltip-balloon",
    content: function () {
        return "dddd";
    },
        "position": {
        "my": "right top",
            "at": "left"
    },
        "show": {
        "effect": "drop",
            "duration": 150,
            "direction": "left"
    },
    close: function (event, ui) {
        $('div.ui-effects-wrapper').remove();  // Add a close function to remove the wrapper.
    }
});

#2

You need to set close to false.

你需要设置接近false。

"close": false,

Change your code to this:

将代码更改为:

$('#myTooltip').tooltip({
    "items": "#myTooltip",
    "tooltipClass": "gr-t-tooltip-balloon",
    "close": false,
    content: function () {
        return true;
    },
    "position": {
        "my": "right top",
        "at": "left"
    },
    "show": {
        "effect": "drop",
        "duration": 150,
        "direction": "left"
    }
});

Fiddle: http://jsfiddle.net/xvMBU/6/