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