源 DOM 元素移动时，jQuery UI 工具提示卡在打开状态

Question

我有一个 div，其中包含一些可以拖放的缩略图。当一个缩略图放在另一个缩略图之上时，它们会交换位置。我使用 AngularJS 并在 $scope 上操作底层数据。

不管怎样，问题来了：

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

一瞬间，底层模型交换了两条数据，并且 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/