#9134 open bug ()

Opened March 04, 2013 08:26PM UTC

Last modified March 06, 2013 07:08PM UTC

Tooltip: Issues with the track option + animations

Reported by: lmpessoa Owned by: lmpessoa
Priority: minor Milestone: none
Component: ui.tooltip Version: 1.10.1
Keywords: Cc:
Blocked by: Blocking:
Description

I've been trying to set a short combination of features on the tooltip widget and have found that some animations produce a weird result: The tooltip does its animation and, once the animation is finished, it moves to another location. And either is the desired location (both seems to be random), which is only corrected when the cursor is moved. The js code for the sample is reproduced below for convenience (full sample on http://jsfiddle.net/YCETB/):

$(function () {
    $(".nav-panel .menu .item").tooltip({
        tooltipClass: "info",
        track: true,
        show: {
            effect: "drop",
            direction: "up",
            delay: 1500,
            duration: 600,
            easing: "easeOutQuart"
        },
        position: {
            my: "left+15 top+15",
            collision: "none"
        }
    });
});

The minimal version on jsFiddle was tested with the available versions of jQuery and jQueryUI available there and none produced the correct result. I wanted to see if I could change the animation (to fit my purpose) and found some others also produced the same wrong results (actually I believe only "fade" produced the expected result).

Code was verified by me to be reproducible on Google Chrome 25, Mozilla Firefox 12 and Internet Explorer 9, all the most recent versions running on a Windows 7 Pro.

Attachments (0)
Change History (4)

Changed March 05, 2013 03:06PM UTC by tj.vantoll comment:1

owner: → lmpessoa
status: new → pending

Hi lmpessoa,

Thanks for taking the time to contribute to the jQuery UI project. This movement only when the track option is used in combination with an animation that moves the tooltip. Here's a reduced version of your test case - http://jsfiddle.net/tj_vantoll/EZQrJ/. Comment out the track option and you can see that it works.

Using the track option with an animation that moves the tooltip seems like bad UX to me so I don't think this is something we're going to support. What's your use case for setting these options as such?

Changed March 05, 2013 03:34PM UTC by lmpessoa comment:2

status: pending → new

Hi tj.vantoll.

Have you ever seen the config page of a Squarespace site? The icons on the left panel have hints with this behaviour and that is what I'm trying to reproduce (for a personal project; you may try a free account to see this). They use YUI for that and works like a charm, but I can't get used to YUI; jQuery seems easier to use.

As a developer, I'm faced day-to-day with user's requests that seem absurd to me too but that makes perfect sense to the their needs (and I have to implement it even in disagreement too). Of course I could stop my work and fix this myself and handle all the updates to the library myself too, but I think that, since there is this "track" option, users will expect this behaviour.

IMHO, either this should be fixed for the expected behaivour (using "track" already changes "position, of" to the cursor but animations don't seem to be considering this) or changed so that no animation whatsoever can be used with tracking (since you believe that's bad UX anyway). But some change must be done here.

Changed March 06, 2013 02:49AM UTC by tj.vantoll comment:3

status: new → open
summary: Tooltip moving from where it should be → Tooltip: Issues with the track option + animations

Changed March 06, 2013 07:08PM UTC by lmpessoa comment:4

I just got what's wrong here.

The animation as defined on the sample happens perfectly, *IF* the cursor is stopped and doesn't move after it first enter the element that triggers the tooltip.

Since there is a huge delay between entering the element and displaying the tooltip, the cursor can move to another random position on the element. If you position the cursor in the middle of the element before the tooltip displays, it will be animated almost always on the correct place. But the random reposition that happens after the animation is not so random at all; the tooltip gets a move back to where it should be if it were shown without delay, the position where the first mouseover event happened.

The solution to implementing this animation correctly (as it seems to me) is to track the changes to the cursor position and update the animation position relative to the last cursor position captured while ignoring the position of the event that actually triggered the tooltip.

Of course, this tracking should be done only when options.track == true. I've been trying to write my own (...*cough* crappy! *cough*...) fix for this, but it seems it will require changes on both jQuery and jQueryUI.