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

[shnitz]

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/

[acouch]

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.

[acouch]

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

[acouch]

If tooltip is hidden, bail.

​https://github.com/jquery/jquery-ui/pull/760

[shnitz]

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/

[acouch]

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.

[acouch]

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)

[shnitz]

Replying to 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.

[acouch]

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

[shnitz]

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

[Andrew Couch]

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

[PhoenixFnX]

I think this leads to this new bug : #14957