Skip to main content

Search and Top Navigation

#8740 closed bug (fixed)

Opened October 27, 2012 02:10AM UTC

Closed February 25, 2015 08:36PM UTC

Last modified March 10, 2015 04:41PM UTC

Tooltip: Does not hide consistently with dynamically loaded content

Reported by: dsargent@gmail.com Owned by: dsargent@gmail.com
Priority: minor Milestone: 1.11.4
Component: ui.tooltip Version: 1.9.1
Keywords: Cc:
Blocked by: Blocking:
Description

Although it's better in 1.9.1 there are still times when tooltips either get stuck open.

Most examples occur when a delegated event loads data into the tooltip from AJAX and the users mouse very briefly passes over the tooltip.

Would a hover intent kind of delay help this. i.e. have an option to only show the tooltip if the mouse point is over the tip for a hundred milliseconds or so.

In the same scenario I've also seen it flip it's behavior after quick pass. Not hovering shows the content and hovering hides it. Usually passing the mouse over the link a couple times fixes it.

I don't know if any of these are really fixable.

One possible speudo fix would be to track the element the tooltip is bound to and make sure the tooltip is hidden when the element is hidden or destroyed.

This was in FireFox 16.0.1

Attachments (0)
Change History (31)

Changed October 27, 2012 07:26PM UTC by tj.vantoll comment:1

owner: → dsargent@gmail.com
status: newpending

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).

Changed October 30, 2012 09:07PM UTC by dsargent@gmail.com comment:2

status: pendingnew

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).

Changed October 30, 2012 09:39PM UTC by dsargent@gmail.com comment:3

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.

Changed October 31, 2012 02:20AM UTC by tj.vantoll comment:4

status: newopen
summary: Tooltip still does not hide consistently.Tooltip: Does not hide consistently with dynamically loaded content

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.

Changed November 05, 2012 06:42PM UTC by jzaefferer comment:5

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.

Changed November 06, 2012 02:20AM UTC by tj.vantoll comment:6

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/.

Changed November 09, 2012 10:53AM UTC by jzaefferer comment:7

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.

Changed November 14, 2012 07:15PM UTC by Scott González comment:8

resolution: → fixed
status: openclosed

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

Changeset: 1b503a237e1dc47739a8a451debbc86e169851e3

Changed November 14, 2012 07:15PM UTC by Scott González comment:9

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

(cherry picked from commit 1b503a237e1dc47739a8a451debbc86e169851e3)

Changeset: f4ce4d309c6384ccda68065bbbee5a4404385503

Changed November 14, 2012 07:15PM UTC by scottgonzalez comment:10

milestone: 1.10.01.9.2

Changed December 10, 2012 06:35PM UTC by dsargent@gmail.com comment:11

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.

Changed December 11, 2012 04:26AM UTC by tj.vantoll comment:12

milestone: 1.9.21.10.0
resolution: fixed
status: closedreopened

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.

Changed January 25, 2013 09:23PM UTC by tj.vantoll comment:13

milestone: 1.10.0none

Changed February 08, 2013 03:36AM UTC by EliW comment:14

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.

Changed March 28, 2013 04:23PM UTC by avatarus comment:15

Same issue with me. Any luck finding solution?

Changed April 02, 2013 01:47AM UTC by tj.vantoll comment:16

#9198 is a duplicate of this ticket.

Changed April 02, 2013 01:48AM UTC by tj.vantoll comment:17

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

Changed April 16, 2013 05:53AM UTC by jonaslewin comment:18

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

Changed April 30, 2013 09:47AM UTC by mziech comment:19

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

Changed May 16, 2013 10:39AM UTC by ka3yc comment:20

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

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

Changed October 23, 2013 04:49PM UTC by zigshanklin comment:21

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.

Changed November 07, 2013 06:22PM UTC by foodbaby comment:22

Thanks for the patch Marco - it works!

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

Changed April 01, 2014 10:03AM UTC by shivamtandon24 comment:23

_comment0: 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. \ I am currently using IE8 and 1.10.2 version of jquery UI.1397566850309715

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.

Changed May 14, 2014 06:02PM UTC by totszwai comment:24

_comment0: 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) { \ // workaround for bug http://bugs.jqueryui.com/ticket/8740 \ $(ui.tooltip).siblings(".tooltip").remove(); \ } \ \ Basically just remove any other stuck tooltips. \ HTH1400090606818058

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

Changed June 16, 2014 02:32PM UTC by lotjuh comment:25

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

Changed June 18, 2014 04:55PM UTC by TheDude comment:26

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!

Changed August 15, 2014 04:36PM UTC by bugtester comment:27

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

Changed February 25, 2015 08:36PM UTC by Marco Ziech comment:28

resolution: → fixed
status: reopenedclosed

Tooltip: Register event handlers before content is loaded

Fixes #8740

Closes gh-1053

Closes gh-1456

Changeset: c4e367bb31c21d7c8b2701c626a92a2f13be5af4

Changed February 25, 2015 08:36PM UTC by scottgonzalez comment:29

milestone: none1.12.0

Changed March 10, 2015 04:41PM UTC by Marco Ziech comment:30

Tooltip: Register event handlers before content is loaded

Fixes #8740

Closes gh-1053

Closes gh-1456

(cherry picked from commit c4e367bb31c21d7c8b2701c626a92a2f13be5af4)

Changeset: 88291ffc4d6a5f4762ae65e42de607f5588101dd

Changed March 10, 2015 04:41PM UTC by scottgonzalez comment:31

milestone: 1.12.01.11.4