Tooltip: Delegated tooltips don't close when the tooltipped element is removed

[josepsanzcamp]

I have a page that contain some elements with title attribute and the tooltip works as expected, but sometimes, when I replace the content that contain the tooltip launcher between the show and hide event, the hide event never is executed and the tooltip is attached to the screen. Currently, I hide all .ui-tooltip elements to prevent this issue when I replace the content.

[Scott González]

Please provide a reduced test case showin the situation that you're describing.

[brendandc]

I am seeing the same issue, here is a reduced test case:

​http://jsfiddle.net/CNDq6/1

[Scott González]

I had a feeling this was about delegated tooltips. Perhaps we can bind temporary remove event handlers for open delegated tooltips.

[acouch]

binding a remove event handler fixes the issue.

​https://github.com/couchand/jquery-ui/commit/c0c14d1ac7d26792b34e30dbed9e41735ac3e5cd

[Jörn Zaefferer]

Stupid trac, that commit didn't land yet.

[Jörn Zaefferer]

Or did acouch just close the ticket manually? Can't tell.

[acouch]

yes, manually closed per suggestion from another at my table.

it's in pull request ​https://github.com/jquery/jquery-ui/pull/751

[Scott González]

#8683 is a duplicate of this ticket.

[[email protected]…]

How is this a minor priority? It makes tooltips useless if you want to use an AJAX call to load the data. Is there currently a known work around?

[acouch]

@dsargent - from the op: "Currently, I hide all .ui-tooltip elements to prevent this issue when I replace the content."

They could also be safely removed with a simple $( ".ui-tooltip" ).remove() just before or after replacing the content.

[[email protected]…]

Doesn't help. My problem may not be completely related to this bug, but I'm not sure. In my case I have tooltips attached to links in a dialog, the contents of the tooltip are being populated via an AJAX call, if you click the link it does not fire an event (return false) but this causes the tooltip to stay open. I've added your suggestion to the close event of the dialog box, if you then close the dialog box the tooltip disappears and then reappears in the top right corner of the screen with a different ID. Something is recreating the silly things! I've also tried: $('.ui-tooltip').hide(); $('.ui-tooltip').tooltip('destroy'); etc. No matter what I do in the dialog close event, the tooltip is recreated a split second after the dialog closes . . . I've replicated this with jsFiddle here ​http://jsfiddle.net/H34rr/ To make it happen do the following. Hover over the link in the dialog, the tooltip should appear. Press Escape key on the keybaord to close the dialog.

Note: I've discovered the hide animation seems to be helping to cause the problem.

Any clue on how I can fix this short term. If I had hair I'd be pulling it out about now :)

Replying to acouch:

@dsargent - from the op: "Currently, I hide all .ui-tooltip elements to prevent this issue when I replace the content."

They could also be safely removed with a simple $( ".ui-tooltip" ).remove() just before or after replacing the content.

[Scott González]

#8704 is a duplicate of this ticket.

[Andrew Couch]

Tooltip: handle removal of elements with delegated tooltips. Fixed #8646 - Delegated tooltips don't close when the tooltipped element is removed

Changeset: 3b2d1e7736be99671af70aa3b775d67b917517e5

[acouch]

I was able to get rid of the issue by upgrading jQuery UI to 1.9.1.

Replying to [email protected]…