當源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/