Skip to main content

Search and Top Navigation

#8644 closed bug (fixed)

Opened October 09, 2012 07:00PM UTC

Closed October 21, 2012 05:31PM UTC

Last modified April 27, 2016 11:34AM UTC

Tooltip: Delayed tooltips set to track should reposition when being shown for the first time.

Reported by: shnitz Owned by: acouch
Priority: minor Milestone: 1.9.1
Component: ui.tooltip Version: 1.9.0
Keywords: Cc:
Blocked by: Blocking:
Description

Having the position set and using a delay to make sure the mouse ins't moving when the tooltip shows causes the tooltip to appear at the incorrect location and only gets repositionsed when the mouse moves again.

http://jsfiddle.net/rBdXm/

Attachments (0)
Change History (13)

Changed October 15, 2012 04:12PM UTC by petersendidit comment:1

status: newopen
summary: Delayed tooltips set to track should reposition when being shown for the first time.Tooltip: Delayed tooltips set to track should reposition when being shown for the first time.

Changed October 15, 2012 08:48PM UTC by acouch comment:2

owner: → acouch
status: openassigned

Changed October 15, 2012 09:58PM UTC by acouch comment:3

The issue comes about due to the relationship between Widget#show and Tooltip#open.

The tooltip method repositions the tooltip before firing show, and could conceivably reposition after the animation completes. However, there is no hook for post-delay, pre-animation updates.

Changed October 16, 2012 04:47PM UTC by acouch comment:4

The issue arises thusly:

  • mouseover event fires
  • tooltip is created, positioned, and hidden
  • animation is queued, but element is not immediately visible
  • mousemove event (paired with mouseover) fires immediately
  • attempt is made to reposition the element, but since it's hidden the position fails

Changed October 16, 2012 05:05PM UTC by acouch comment:5

Changed October 16, 2012 08:25PM UTC by shnitz comment:6

_comment0: It is much close but still seems to be in the wrong position with that patch, it is close, but if you have a larger target you can see the issue. The position is calculated when the mouse enters but should be done when it shows. \ \ i.e. Move the mouse to the middle in the example below, the tooltip appears where it enters the tooltip target, not where the mouse is. \ \ http://jsfiddle.net/Be2Bk/1350419156574551

It is much closer but still seems to be in the wrong position with that patch, it is close, but if you have a larger target you can see the issue. The position is calculated when the mouse enters but should be done when it shows.

i.e. Move the mouse to the middle in the example below, the tooltip appears where it enters the tooltip target, not where the mouse is.

http://jsfiddle.net/Be2Bk/

Changed October 16, 2012 08:41PM UTC by acouch comment:7

Unfortunately this is about the best we can do. We can't position the element while it's hidden, and we don't have a callback hook until after the animation has completed. This means we are unable to update the position after the delay but before the tooltip shows.

We could reposition the tooltip after the animation has completed, but that would result in a noticeable jitter at the end of the animation, probably while the user is trying to read the message.

A possible workaround would be to use a slow, eased animation instead of a delay. That way the tooltip will never be truly hidden, so it can be constantly repositioned.

Changed October 16, 2012 08:58PM UTC by acouch comment:8

_comment0: For instance: \ \ {{{ \ $('.tooltip-enabled[title]').tooltip({ \ show: { \ easing: "easeInBack", \ effect: "fadeIn" \ }, \ track: true, \ position: { \ my: 'left+10 top+10', \ at: 'right bottom' \ } \ }); \ }}}1350421204465079

For instance:

$('.tooltip-enabled[title]').tooltip({
    show: {          
        easing: "easeInBack",
        effect: "fadeIn"
    },
    track: true,
    position: {
        my: 'left+10 top+10',
        at: 'right bottom'
    }
});

(Apologies for the code block, my fiddle is referencing a locally-served copy of the UI library, so it wouldn't be much use)

Changed October 16, 2012 09:19PM UTC by shnitz comment:9

Replying to [comment:8 acouch]:

My specific use case is not wanting to show the tt until 2 seconds later so an animation wouldn't really work there.

Would it be possible to add a delay parameter to the tooltip itself? That way you can position it and show instantly after 2 seconds.

Changed October 16, 2012 10:02PM UTC by acouch comment:10

Remember that you can customize the easing function to have whatever behavior you'd prefer.

After talking this issue over with @scott_gonzalez, we came up with a possible fix. However, as you will notice, it is very ugly, and requires adding a significant amount of code explicitly for this one edge case.

https://github.com/couchand/jquery-ui/commit/dce255bc2bda7cb16b79252e8316e5d606c60c03

Changed October 17, 2012 05:33PM UTC by shnitz comment:11

Well that is not really good. Oh well. I ended up just not tracking and using the show delay. The tracking had another issue that prevented it from working with my markup anyway. (http://jsfiddle.net/w3QT7/) if your interested, I sometimes feel like I'm doing everything the hard way :)

Changed October 21, 2012 05:31PM UTC by Andrew Couch comment:12

resolution: → fixed
status: assignedclosed

Tooltip: Do not attempt to position if tooltip is hidden. Fixed #8644 - Delayed tooltips set to track should reposition when being shown for the first time.

Changeset: 0b3e59f149054122d8948c29baa4bb174006d75e

Changed April 27, 2016 11:34AM UTC by PhoenixFnX comment:13

I think this leads to this new bug : #14957