当源DOM元素移动时，jQuery UI工具提示处于打开状态

Question

我有一个div，其中包含一些可以拖放的缩略图。 当一个缩略图放在另一缩略图上方时，它们会切换位置。 我使用AngularJS并在$ scope上处理基础数据来执行此操作。

无论如何，这是问题所在：

缩略图的工具提示会在我将其悬停时打开。 当我单击并开始拖动缩略图（将其称为源缩略图）时，其工具提示消失（应如此）。 到现在为止还挺好。 但是，当我将缩略图放在另一个缩略图上方时，会短暂出现目标缩略图的工具提示，因为鼠标当前悬停在目标工具提示上方。

稍后，基础模型交换了两个数据，而DOM更新以反映更改-有效地交换了两个缩略图。 现在，目标的工具提示仍处于打开状态，但是我的鼠标不再位于目标上，因为它已经被交换了！ 工具提示将一直保持打开状态，直到我在新位置重新触发工具提示事件为止。

大约有50％的时间会观察到这种现象，但是我可以通过在更改基础数据之前添加短暂（〜1秒）的延迟，从而使缩略图切换位置，来人工地100％地重现该行为。

注意：在Chrome中不会发生此问题，但在Firefox和IE中会发生。 我没有尝试过Safari。

有没有人遇到过这个问题或类似的问题？ 如果可以提供更多详细信息，请告诉我。 谢谢！

编辑：这是一个说明问题的jsfiddle示例： jsfiddle

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script>
        $.widget.bridge('uitooltip', $.ui.tooltip);
    </script>

<div ng-app="myApp">
    <div ng-controller="ContentController">
        <div class="indent">
            <div ng-repeat="square in squares" style="width: 400px">
                <item data="square" helper="helperFunction"></item>
            </div>
            Drag the top box onto the bottom box and keep the mouse cursor stationary for ~1 second.  The tooltip will be stuck open when the boxes switch places.  Dragging the bottom box to the top box, however, does not have this problem.
            <br><br>
            Also, this problem seems to only be present in Firefox and IE.  Chrome works as expected.
        </div>
    </div>
</div>

Answer 1

您可以将默认的浏览器工具提示替换为jquery版本：

$('*').tooltip({track: true});

然后，可以在拖动元素时将工具提示设置为禁用：

$('.thumbnail').tooltip('disable');

放下后，再次启用它们：

$('.thumbnail').tooltip('enable');

http://jsfiddle.net/uHuDp/1/

编辑：例如：

 $(element).find("span.item-outer").uitooltip('disable');
 $(element).find("span.item-outer").uitooltip('enable');

http://jsfiddle.net/uHuDp/260/