[Solved] qTips in wrong position when a div is scrolled

[mattbradley]

I've run into a little problem. I've got a fixed height div with a scrollbar that contains rows of items. Each item has a tooltip that pops up next to it. When you scroll down the div to the lower items and show the tooltip, the tip is shown below the div as if the div wasn't at a fixed height. A simple version is shown in this jsFiddle. http://jsfiddle.net/bmnAD/3/

I'm at a loss. Any ideas?

[aar0n]

I'm also curious how to accomplish what you're after. I would think you could somehow re-calculate the position before the tip is shown rather than use the cached value. I'm not quite sure how or if it's possible though.

[patricia]

I've got the same problem when having qtips in a jquery dialog that has a set height and content scrolls!

[Craig]

Try out the latest commit guys, hopefully that should solve your issues! http://jsfiddle.net/bmnAD/9/

[mattbradley]

(12th January 21:56)Craig Wrote:  Try out the latest commit guys, hopefully that should solve your issues! http://jsfiddle.net/bmnAD/9/

Excellent! Thanks Craig. You're amazing!

[aar0n]

Check this example out Craig:

http://jsfiddle.net/ry8CZ/2/

It doesn't seem to work with horizontal scrolling. Any ideas?

[mattbradley]

(12th January 22:34)aar0n Wrote:  Check this example out Craig:

http://jsfiddle.net/ry8CZ/2/

It doesn't seem to work with horizontal scrolling. Any ideas?

Make sure to set the position.container option. http://jsfiddle.net/ry8CZ/3/

[Craig]

You need to have it contained inside the scrolling container Aaron

[aar0n]

Ah I see... very cool!

[patricia]

Not so fast!!!

if it's in a jquery ui dialog, it still positions them all wonky.

http://jsfiddle.net/bmnAD/19/

[rmaire]

I found another problem ...

In some cases, the screen is blinking when QTIP prepare his render (or prepare content in ajax case) ...

This issue is only when the QTIP is on an element not initially visible in the scroll container.
For example, in a table with 10 rows but only 3 rows initialy visible in the canevas ... The problem appears only into rows from 4 to 10 !
=> When i scroll verticaly and then i ask QTIP to show ...

But in my case and with my framework, i can't reproduce problem with JSFIDDLE ...

My config :
- A table with Vertical scrolling and big rows (50px for each row height)
- An ajax request to retrieve content ...
- A "delegate" listener

My QTIP code :

JS Code

var parentId = 'div#HelpdeskView_0.dataGrid1'.replace(/\./g, '\\.');
$(parentId).delegate('div.gridCellToolTip', 'mouseover', function (event) {
    var targetId = 'containerId';
    var elementId = $(this).attr('id');
    var ajaxURL = 'http://myajaxurl';
    $(this).qtip({
        overwrite: false,
        content: {
            text: 'Loading ...',
            ajax: {
                url: ajaxURL,
                type: 'POST',
                once: false,
                success: function (data, status) {
                    updateTooltipAjax(this, data, status);
                }
            }
        },
        show: {
            ready: true,
            delay: 750,
            solo: true
        },
        hide: {
            fixed: true,
            delay: 180
        },
        position: {
            container: $(targetId),
            my: 'bottom center',
            at: 'top center',
        },
        style: {
            classes: 'ui-tooltip-shadow ui-tooltip-rounded ui-tooltip-plain'
        }
    });
});

I'm trying to reproduce exactly with JsFiddle ...

Thanks by advance for your help !!!

[todsa]

Quote:Posted by patricia - 13th January 14:25
Not so fast!!! Tongue

if it's in a jquery ui dialog, it still positions them all wonky.

http://jsfiddle.net/bmnAD/19/

I'm having this same problem with my site as i also use the jQuery UI. I have tabs and the positions get all wonky when you scroll. I've downloaded the latest code and the problem is still the same.

I should add... this was a problem in IE6, not Firefox.

Any help ?

[patricia]

For me it happens in FF and IE

[Craig]

Working on this now the tips plugin has been updated. Bare with me guys

[todsa]

Thanks Craig. I've posted way too many threads here recently, but thanks for the help. I love what you've made, and I think it's the best tooltip plugin for jQuery.

[sparky672]

I'm not sure if my problem is the same as described here... so I'm not sure if I did something wrong or if I'm supposed to be waiting on the next update.

I have one of those floating toolbar things. It's always x number of pixels from the top of the window no matter where you scroll the window content. qTip works great when the page is at the top... HOWEVER once you scroll downward, the qTips just move along up with the content. But the toolbar is fixed (floating over the scrolling content) as it should be and the tips no longer line up with their respective elements.

Somebody said to put "it" in the same div as the toolbar but that doesn't make any sense to me. The elements triggering the tips are already in the toolbar since they are the toolbar images themselves. And the rest is just JavaScript and CSS so of course that doesn't need to be inside the div.

So before I create a demo in JSFiddle, is this the same bug Craig is currently attempting to fix?

---

(18th January 17:32)Craig Wrote:  ... Bare with me guys

yikes! keep your webcam off then!

[Craig]

Heh sparky, set your position.container option to the fixed div and it should fix your problem.

[sparky672]

(20th January 14:37)Craig Wrote:  Heh sparky, set your position.container option to the fixed div and it should fix your problem.

JS Code

container: $('#myFloatingToolBar'),

That made it worse... a lot worse.

1. I can only see the tip of the pointer and it's not pointing at the correct element. Only seeing the tip because I have overflow set to hidden on my fixed div toolbar. I cannot explain why it's pointing at the wrong thing. Scrolling changes the position of the tip.

2. If I remove the overflow:hidden from my fixed div, then I can see the whole qTip. But again, it's pointing at the wrong element, scrolling makes it worse, and for some very odd reason the qTip is squished down to about 75 pixels wide (tip is wrapping) despite the fact that it should not wrap (tooltip is only a few words).

Without setting the position container, it looks fine until the page is scrolled.

[Craig]

I've added a fix for this in the latest commit, check it out sparky

[sparky672]

(20th January 16:24)Craig Wrote:  I've added a fix for this in the latest commit, check it out sparky

Updated with latest qTip JS and CSS... No dice.

The scrolling part seems to be fixed but...

1. qTip box still squished for some unknown reason.

2. qTip is always offset by the same amount as my ToolBar. ie... my toolbar Div is fixed positioned 90 pixels from the top edge of the window so the qTip is positioned 90 pixels under the element I'm pointing to (90 pixels from the top edge of the floating toolbar.)

[Craig]

Can you setup a test case on jsfiddle please?

[sparky672]

(20th January 16:53)Craig Wrote:  Can you setup a test case on jsfiddle please?

I will try. It may take me a while.

---

Just so you know... everything I've described about this problem, to this point, is happening in Safari...

This jsfiddle show the problem exactly, but only happening in Safari...

http://jsfiddle.net/SGAh8/

It actually works in Firefox but totally breaks down in Explorer.

[sparky672]

Not sure if you got notification of my last reply so I'm bumping. See above.

[sparky672]

JSFiddle posted yesterday... did you see it?

[Craig]

Working on this in a few days guys, exams at the moment so don't have much time to spend. Bear with me