剑道UI工具提示有时会在应该消失的时候仍然可见

Kendo UI Tooltip Will Sometimes Remain Visible When it should Disappear

本文关键字：消失 候仍然 工具提示 UI 剑道      更新时间：2023-09-26

我一直在玩这个相当一段时间，我不知道什么是错的。当我在一行中有几个链接，并且经常将鼠标光标快速移动到它们上面时，工具提示在应该消失的时候仍然可见(即使光标不再位于链接上，它仍然可见)。

我相信我的代码在逻辑上是有效的，其他人可以看看他们是否知道为什么工具提示在这里和那里将保持可见?

对于这种类型的链接:

<a href="www.rich.com" onmouseover="tooltip(this); this.onmouseover=null;">Link</a>

代码如下:

function tooltip(e) {
    var ticketType = j$(e).data("ticket-type");
    var ticketID = j$(e).data("ticket-id");
    j$.post("/Some/Url/", { "ticketID":ticketID, "ticketType":ticketType },
        function(r) {
            var title = r["tt"];
            var tooltip = j$(e).kendoTooltip( { content: title, position: "top" } ).data("kendoTooltip");
        }).always(function() {
            if (j$(e).is(":hover")) { j$(e).data("kendoTooltip").show(); }
            else { j$(e).data("kendoTooltip").hide(); }
        });
    j$(e).hover(function() {},
        // Handler for when the pointer is leaving an element
        function(e) {
            if (j$(e.target).data("kendoTooltip") != undefined) {
                j$(e.target).data("kendoTooltip").hide();
                .log(e.target.innerHTML + ": was hidden.");
            }
        }
    );
}

我认为问题是，有时你鼠标离开之前ajax post返回，因此工具提示显示后，你离开一个链接。除了在mouseout上隐藏之外，如何在目标链接上设置一个数据属性，以便AJAX返回可以在显示工具提示之前检查该属性:

function tooltip(e) {
    j$(e).data("hover", "true"); //turn on hover data-attribute
    var ticketType = j$(e).data("ticket-type");
    var ticketID = j$(e).data("ticket-id");
    j$.post("/Some/Url/", { "ticketID":ticketID, "ticketType":ticketType },
        function(r) {
            var title = r["tt"];
            var tooltip = j$(e).kendoTooltip( { content: title, position: "top" } ).data("kendoTooltip");
        }).always(function() {
            if (j$(e).data("hover") == "true") { j$(e).data("kendoTooltip").show(); }
            else { j$(e).data("kendoTooltip").hide(); }
        });
    j$(e).hover(function() {},
        // Handler for when the pointer is leaving an element
        function(e) {
            j$(e).data("hover", "false"); //turn offhover data-attribute
            if (j$(e.target).data("kendoTooltip") != undefined) {
                j$(e.target).data("kendoTooltip").hide();
                .log(e.target.innerHTML + ": was hidden.");
            }
        }
    );
}

注意:demo使用setTimeout来模拟ajax调用

相关文章：