Menu
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>
917
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/
175
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.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
