Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

qtip2

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>
like image 917
Aurimas Avatar asked May 15 '14 08:05

Aurimas


2 Answers

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/

like image 175
emik Avatar answered Oct 21 '22 18:10

emik


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.

like image 41
Peter Okaru Avatar answered Oct 21 '22 18:10

Peter Okaru