Opened 7 years ago

Closed 7 years ago

Last modified 3 years ago

#8644 closed bug (fixed)

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/

Change History (13)

comment:1 Changed 7 years ago by petersendidit

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.

comment:2 Changed 7 years ago by acouch

Owner: set to acouch
Status: openassigned

comment:3 Changed 7 years ago by 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.

comment:4 Changed 7 years ago by 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

comment:5 Changed 7 years ago by acouch

comment:6 Changed 7 years ago by shnitz

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/

Last edited 7 years ago by shnitz (previous) (diff)

comment:7 Changed 7 years ago by 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.

comment:8 in reply to:  7 ; Changed 7 years ago by 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)

Last edited 7 years ago by acouch (previous) (diff)

comment:9 in reply to:  8 Changed 7 years ago by 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.

comment:10 Changed 7 years ago by 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

comment:11 Changed 7 years ago by 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 :)

comment:12 Changed 7 years ago by Andrew Couch

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

comment:13 Changed 3 years ago by PhoenixFnX

I think this leads to this new bug : #14957

Note: See TracTickets for help on using tickets.