Question

我正在尝试在视口中保留工具提示。除非滚动页面，否则代码似乎有效。

有人可以看一下吗？

<div class="test"></div>
<p><a href="#" rel="tooltip" title="Cool tooltip with long name">Cool tooltip</a></p>
<p>or <a href="#" rel="tooltip" title="Another tooltip">Another tooltip</a></p>
<div class="test"></div>

http://jsfiddle.net/QvLwd/5/

Answer 1

在您的情况下，您应该更改此行：

pos_top  = target.offset().top - tooltip.outerHeight() - 20 - $(window).scrollTop();

到：

pos_top  = target.offset().top - tooltip.outerHeight() - 20; // initial top relative to BODY

和此：

if( pos_top < 0 )

为：

if( pos_top < $(window).scrollTop() )

（以及pos_left的类似更改）

这是因为target.offset（）为您提供了相对于BODY元素的位置，并且您的BODY元素的位置受到滚动的影响（即滚动时BODY会在窗口顶部上方展开）。

换句话说：因为你正在向BODY添加工具提示元素，所以在计算工具提示的位置时你不应该用$(window).scrollTop()来调整它的位置，因为无论如何它都会被它调整（通过它的父级，即BODY的位置））。您需要做的就是检查工具提示的初始位置是否在窗口上方，并在这种情况下将其向下移动 - 具有顶部坐标< $(window).scrollTop()的BODY中的所有内容都将被隐藏（至少部分）。

JQuery在视口中保留工具提示

1 个答案: