Search code examples
qtip2

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


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>

Solution

  • 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/