AJAX Kendo Tooltip Race Condition

Question

I am making an AJAX call to retrieve some data via a POST request. Then, I am using that data to create a tooltip. Here's the code:

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

I believe there is a race condition because the tooltip, even after my mouse moved off of it, will still appear. Then I have to put my point on the element, and then move it off again, to make it disappear. What can be done to solve this?

I tried a few different things, including the if (j$(e.target).is(":hover")) condition you see there. But it still doesn't do the trick.

I think you need to target a DOM element in the show(), like tooltip.show($("#target")); http://docs.telerik.com/KENDO-UI/api/javascript/ui/tooltip#methods-show — Steve Greene, Sep 29 '15 at 21:19
I tried that as well. There is no effect. The issue is not that it is NOT showing. The issue is that it is showing when it should not show. — Rich Episcopo, Sep 29 '15 at 21:44

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

See this question: Jquery condition check is(':hover') not working.

:hover is a CSS pseudo class and not a jQuery selector that can be used with .is().

Try this instead:

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

DEMO

edited May 23 '17 at 12:06

Community

1
1

answered Sep 29 '15 at 21:47

ezanker

24,628
1
20
35

Thank you very much for your response! I tried what you mentioned, and unfortunatley I am getting `unsupported pseudo: hover`. Is there another way around this? Is your thinking that my condition in the `if` is not evaluating correctly, which is what is causing the tooltip to show when is should not? – Rich Episcopo Sep 29 '15 at 22:14
The tooltip doesn't always show up incorrectly, only randomly. So I am not sure if it is the condition. – Rich Episcopo Sep 29 '15 at 22:20
@RichieEpiscopo, what about checking mouseout like this: http://dojo.telerik.com/@ezanker/OVihi – ezanker Sep 29 '15 at 22:55

score 0 · Accepted Answer · answered Sep 29 '15 at 22:43

OK, so I actually found out the answer to my own question finally after a few hours of searching.

The issue that I was seeing on my UI -- that the tooltips wouldn't go away and there were sometimes 2 tooltips displaying at the same time -- was not the result of a race condition.

It was instead a result that when you use multiple kendo tooltip instances in the same web page, you need to manually hide/show them to ensure there will not be a stray tooltip.

The problem, a an overview of the soltuion is described here.

Specifically, I solved my problem by adding:

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 Race Condition

2 Answers2