Question

步骤：
- 加载页面，在元素上移动鼠标 - ＆gt; qtip2在元素上正确显示提示 - 向下滚动页面，在元素上移动鼠标 - ＆gt; qtip2显示元素下方的提示（提示＆＃39; s坐标更改与页面向下滚动相同）

这仅在Chrome上重现，在IE或FF上正常工作 - 页面滚动不会影响提示的位置

在Chrome中向下滚动页面时，提示如何改变位置的任何想法？

使用qTip2 v2.2.0，脚本初始化代码为：

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

Answer 1

我遇到了同样的问题，并且我从overflow删除 position属性或<body>属性修复了问题。如果身体上有overflow: scroll;或overflow: auto;以及position: relative或position: absolute;的组合，则会出现该错误。

以下是仅通过删除其中一条规则在Chrome中修复的示例：http://jsfiddle.net/bQ6Fv/1/

Answer 2

我也遇到了这个问题并通过设置position的target属性来解决它。 api允许您以几种方式定位工具提示，帮助我的那个是包含页面上绝对x / y位置的数组。

文档：http://qtip2.com/options#position

这是我的意思的一个例子：

position: {
     my: 'top center',
     at: 'bottom center',
     target: [$(this).offset().left, $(this).offset().top]
}

该片段将工具提示放在目标元素的左上角。您可以根据需要从左/上偏移量中加/减。

我希望这会有所帮助。

Qtip2：当页面在chrome中向下滚动时，tip会改变位置

2 个答案: