Qtip2: tip changes position when page was scrolled down in chrome

Asked 15/5, 2014 at 8:12 Answered 8/10, 2014 at 20:55

Steps:
- loading page, moving mouse on element -> qtip2 shows tip correctly on element
- scrolling down page, moving mouse on element -> qtip2 shows tip below element (tip's y coordinate changes same as page was scrolled down)

this is reproduced only on chrome, on IE or FF works correctly - page scroll does not affect tip's position

Any ideas how tip wouldn't change a position when scrolling page down in chrome?

using qTip2 v2.2.0, script initialization code is:

<div id="aa1" style="height: 25px; width: 100px">some text</div>
    <script>
$( document ).ready(function() {
            $("#aa1").qtip(
                {
                   content: "text",
                   style: {
                       classes: 'qtip-bootstrap qtip-shadow',
                       tip: {corner: 'top left'}
                   },
                   position: {
                       my: "top left",
                       at: "bottom right"
                   }
                });
        });
</script>

Outpour answered 15/5, 2014 at 8:12 Comment(1)

happens to me too! it's so annoying. also annoying it takes a loooong time to configure this damn tooltip, it has more settings than windows registry. – Conchitaconchobar 19/8, 2014 at 8:26

I had this same issue and for me removing either the overflow property or the position property from <body> fixed the issue. The bug is present for me when there is a combination of overflow: scroll; or overflow: auto; and position: relative or position: absolute; on the body.

Here is an example that is fixed in Chrome by removing just one of these rules: http://jsfiddle.net/bQ6Fv/1/

Strongroom answered 10/7, 2014 at 8:45 Comment(1)

This is a serious matter. It's hard to find this exact bug in chromium bug tracker to star it. – Conchitaconchobar 19/8, 2014 at 8:34

I also ran into this issue and solved it by setting the target property of position. The api allows you to position the tool tip in a few ways and the one that helped me was the array containing an absolute x/y position on the page.

Documentation: http://qtip2.com/options#position

Here's an example of what I mean:

position: {
     my: 'top center',
     at: 'bottom center',
     target: [$(this).offset().left, $(this).offset().top]
}

That snippet will position the tool tip in the upper left corner of the target element. You can add/subtract from the left/top offsets as needed.

I hope this helps.

Grays answered 8/10, 2014 at 20:55 Comment(0)

Recommended topics

Hot tags