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

StackOverflow https://stackoverflow.com/questions/23672674

  •  23-07-2023
  •  | 
  •  

Question

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>
Était-ce utile?

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

Autres conseils

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.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top