Tooltip: Does not hide consistently with dynamically loaded content

Thanks for taking the time to contribute to the jQuery UI project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket. To get you started, use this boilerplate: http://jsfiddle.net/ZgAqH/. Open the link and click to "Fork" (in the top menu).

Sorry this took a bit, been busy.

http://jsfiddle.net/BukmE/

To replicate, quickly pass the mouse pointer over the view link. After 500ms the tooltip will appear and not disappear. Closing the dialog will not make it go away either. Waving the mouse over the view link will eventually make it go away (if the 500ms timer where not there that is).

Basically, if the callback function takes a little bit (in this case 500ms) it will induce the behavior.

I know I'm using a hideous pause event that is straight from the devil, but that was done to invoke the behavior on a repeated basis.

In the "real world" any call to an Ajax function that takes a more than a few ms will cause this. We see it repeatedly on fresh page load (no caches).

Update: After playing with it for a bit here's what I *think* is going on.

If the callback function takes longer to respond than the users mouse is over the link, the problem occurs.

Hope that helps.

Thanks, I was able to verify this. Interestingly I was able to recreate this issue on Firefox 16 and Chrome 22 on Windows 7 but I cannot get it to happen on OS X regardless of browser.

Need to get rid of the while-pause and replace the dialog with just triggering focus programmatically. That would make it easier to track down the actual issue.

Played with this one a bit, the bug actually looks to be related to the setting of focus. Dialog does this automatically, but if I programmatically set focus on an element AND use a delay in the

content

option the tooltip never goes away - http://jsfiddle.net/tj_vantoll/zGkxX/. If the

content

option is simply a static value the bug is not present - http://jsfiddle.net/tj_vantoll/P4JWN/.

Looks like programmatic focus matches the 'focusin' event, but the event.type is actually 'focus'. Seems like a bug in core to me, but we can work around it for now: https://gist.github.com/19cd921fed1eb358dc0a

If that's okay, it also needs a unit test.

Tooltip: Handle synthetic focusin events. Fixes #8740 - Tooltip: Does not hide consistently with dynamically loaded content.

Changeset: 1b503a237e1dc47739a8a451debbc86e169851e3

Tooltip: Handle synthetic focusin events. Fixes #8740 - Tooltip: Does not hide consistently with dynamically loaded content.

(cherry picked from commit 1b503a237e1dc47739a8a451debbc86e169851e3)

Changeset: f4ce4d309c6384ccda68065bbbee5a4404385503

I may be missing something but this does not look fixed to me.

http://jsfiddle.net/PkJrP/

Same code as my original above but changed the library to 1.9.2

Same problem.

Quick hover over the link and the tooltop will stay open.

It looks like the bug caused by explicitly setting focus was fixed in 1.9.2; I no longer see that problem. However there's definitely something still off here.

Test case against master - http://jsfiddle.net/tj_vantoll/Z2R43/. In this one I am no longer explicitly setting focus and I was able to recreate the issue on Chrome 23 and Firefox 16 on OS X).

To recreate:

1) Hover over the link with the cursor.

2) Leave the link with your cursor before the tooltip is fully faded in.

3) Occasionally the tooltip will not disappear and be stuck displaying indefinitely.

You might have to do it a few times to see the issue. After playing with this for a few minutes I was able to get the issue to happen fairly consistently.

Just wanted to confirm that I had the same issue just recently. Ajax based content endpoints, and if you moved on/off it quickly it stayed forever.

I temporarily fixed it, by adding some .mouseenter .mouseleave code to track the hover status, and then upon 'open', it checks if the mouse is still hovering or not, and only allows the open if so. Otherwise it issues a .close() to shut it down immediately. Hacked, but solves the issue.

Same issue with me. Any luck finding solution?

#9198 is a duplicate of this ticket.

Test case from lokicat in #9198: http://jsfiddle.net/tj_vantoll/nqJBf/

Thanks tj.vantoll. The lokicat fiddle describes the problem exactly. Just hope that it will be fixed soon.

I think the event handlers for events closing the tooltip are registered too late. I submitted a pull with suggested fix.

https://github.com/mziech/jquery-ui/commit/3b2c55d7136615a2802241225abf060c9a1bf795

I think, i've found a workaround, until this bug is fixed :)

http://jsfiddle.net/hkuFE/2/

Replying to [comment:19 mziech]:

I think the event handlers for events closing the tooltip are registered too late. I submitted a pull with suggested fix. https://github.com/mziech/jquery-ui/commit/3b2c55d7136615a2802241225abf060c9a1bf795

Thanks Marco for your patch. It fixed my problem. This needs to be in a release. Has it fallen off the radar? It's a serious bug for anyone using context functions.

Thanks for the patch Marco - it works!

Still waiting for the pull request to be merged: https://github.com/jquery/jquery-ui/pull/1053

Still having the same issue while using the tooltip in a grid.

The tooltip does not close if the movement of the mouse is swift if the data volume in the grid is high.

I am currently using IE8 and 1.10.2 version of jquery UI.

Also encountered this problem, but mine is produced slightly differently.

I have some drag-and-droppable elements, the droppable element has title (so it will trigger tooltip) when i drag an element on top of a droppable element, tooltip will show and when i release my mouse, another new tooltip will gets created, the previous tooltip will be stuck.

My workaround is much simpler and works wonder for simple tooltip.

open: function(event, ui) {
    $(ui.tooltip).siblings(".tooltip").remove();
}

Basically just remove any other stuck tooltips.

HTH

Replying to [comment:23 shivamtandon24]:

Still having the same issue while using the tooltip in a grid. The tooltip does not close if the movement of the mouse is swift if the data volume in the grid is high. I am currently using IE8 and 1.10.2 version of jquery UI.

Can you try my fix?

https://github.com/jquery/jquery-ui/pull/1272

Replying to [comment:22 foodbaby]:

Thanks for the patch Marco - it works! Still waiting for the pull request to be merged: https://github.com/jquery/jquery-ui/pull/1053

This fixed the issue for me (jQ 1.11.1 & jQ UI 1.10.4). I manually applied the patch. Thank goodness and thank you!

Replying to [comment:24 totszwai]:

My workaround is much simpler and works wonder for simple tooltip.

> open: function(event, ui) {
>     $(ui.tooltip).siblings(".tooltip").remove();
> }
> 

Working fine with ".ui-tooltip" (instead ".tooltip") as selctor. Thank you!

I hope a fix coming soon.

I use jQuery-UI 1.11.1

Tooltip: Register event handlers before content is loaded

Fixes #8740

Closes gh-1053

Closes gh-1456

Changeset: c4e367bb31c21d7c8b2701c626a92a2f13be5af4

Tooltip: Register event handlers before content is loaded

Fixes #8740

Closes gh-1053

Closes gh-1456

(cherry picked from commit c4e367bb31c21d7c8b2701c626a92a2f13be5af4)

Changeset: 88291ffc4d6a5f4762ae65e42de607f5588101dd