jquery ui定位不断变化

Question

我开发了一个小工具提示插件。它在IE，Chrome中运行良好。在Firefox中它第一次工作正常。第二次，如果我刷新工具提示是奇怪的位置......不确定发生了什么。

这是步骤

在firefox中

1. 首先将鼠标指向第一个输入框--tooltip将在输入框附近

   1. 然后向下滚动到第二个输入框并将鼠标移到第二个输入框上 - 第二个输入框附近的工具提示。
   2. 单击firefox中的刷新按钮而不向上滚动。
   3. 现在将鼠标悬停在第一个输入框上..您将看不到工具提示..
   4. 清除历史记录并返回，您应该在输入框附近看到工具提示。

   - ＆gt; firefox 3.6.24 /尝试更新到firefox 8仍然是同样的问题

   代码在 http://jsfiddle.net/HE8QN/

   复制到桌面并尝试使用firefox ...

   感谢

Answer 1

来自jQueryUI - Position

  

注意：jQuery UI不支持定位隐藏元素。

（结果是它以某种方式忽略了页面的滚动偏移量）

您可以通过在使用display: block函数之前为其提供以下CSS属性：visibility: hidden和position()，然后在删除它们之后将其作为“隐形块”进行排序。所必要的。

检查http://jsfiddle.net/frozenkoi/RmKyC/我添加了一个我添加的CSS类（.hiddenTip），然后在调用之前和之后删除tip.position({...})（您可以将样式添加为内联{{1}等等）

你还有另一个问题。您可以在页面加载时计算工具提示的位置。重新排列项目时会发生什么？也许文本会重新流动，因为窗口已调整大小或插入内容或元素更改大小。工具提示仍显示在旧的预先计算的位置。我想这就是@Eben Roux在他的回答中所说的。

在我的小提琴中单击显示“演示页面”的H1，您将看到它如何获得高于它的余量，除了工具提示外，一切都向下移动。

编辑：更新小提琴：http://jsfiddle.net/frozenkoi/wKTnC/基于@coool的修改。请注意，我已将tip.css. ...添加到!important和display以及其他一些小调整。

Answer 2

我发现position对尚未显示的元素有奇怪的行为。您可能希望在显示工具提示时定位它。