Question

我正在进行AJAX调用以通过POST请求检索一些数据。然后，我正在使用该数据创建工具提示。这是代码：

sonata_admin:
    dashboard:
        groups:
            sonata.admin.group.ecommerce:
                label:           sonata_ecommerce
                label_catalogue: SonataAdminBundle
                icon:            '<i class="fa fa-dollar"></i>'
                items:
                    - sonata.customer.admin.customer
                    - sonata.invoice.admin.invoice
                    - sonata.order.admin.order
                    - sonata.product.admin.product

我相信存在竞争条件，因为工具提示即使在我的鼠标移开之后仍会出现。然后我必须把我的观点放在元素上，然后再将其移开，使其消失。可以做些什么来解决这个问题？

我尝试了一些不同的东西，包括你在那里看到的j$("#selectorID").one('mouseover', function(e) { var ticketType = e.target.classList[2]; var ticketID = j$(e.target).data("ticket-id"); j$.post("/Some/Url/", { "ticketID":ticketID, "ticketType":ticketType }, function(r) { var title = r["title"]; var tooltip = j$(e.target).kendoTooltip( { content: title, position: "top" } ).data("kendoTooltip"); if (j$(e.target).is(":hover")) { tooltip.show(); } // Race condition } ); } );条件。但它仍然没有做到这一点。

Answer 1

请参阅此问题：Jquery condition check is(':hover') not working。

：hover是一个CSS伪类，而不是可以与.is（）一起使用的jQuery选择器。

请改为尝试：

var id = $(e.target).prop("id");                      
if ($("#" + id + ":hover").length > 0) { tooltip.show(); }

<强> DEMO

Answer 2

好的，所以在经过几个小时的搜索后，我终于找到了自己问题的答案。

我在用户界面上看到的问题 - 工具提示不会消失，同时有两个工具提示同时显示 - 不是竞争条件的结果。< / strong>

相反，当您在同一网页中使用多个kendo工具提示实例时，您需要手动隐藏/显示它们以确保不会出现迷路工具提示。

问题是对解决方案的概述here。

具体来说，我通过添加：
解决了我的问题
j$("#selectorID").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(); } });

AJAX Kendo Tooltip竞赛条件

2 个答案: