Question

我已经玩了很长时间了，我不知道出了什么问题。当我连续连接几个链接时，我的鼠标光标会快速地飞过它们，每当工具提示应该消失时它仍然可见（即使光标不再在链接上也可见）。

我相信我的代码在逻辑上是有效的，其他人可以看到他们是否知道为什么这里的工具提示仍然可见？

对于此类型的链接：

<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.");
            }
        }
    );
}

Answer 1

我认为问题在于，有时你会在ajax post返回之前使用mouseout，因此在你离开链接后会显示工具提示。除了在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

注意：demo使用setTimeout伪造ajax调用

当它消失时，Kendo UI工具提示有时会保持可见

1 个答案: