【问题标题】:Tooltips are mispositioned on hover悬停时工具提示位置错误
【发布时间】:2010-09-14 23:53:57
【问题描述】:

我终其一生都无法弄清楚为什么 jQuery 工具工具提示会出现在错误的位置。将鼠标悬停在 this 页面上的三个灰色框之一(例如“屏幕和语音录制”)上,提示应显示在居中的框顶部。

【问题讨论】:

  • 无需使用 URL 缩短器。您是否要清除referrer
  • @alex,不只是不希望 URL 被编入索引。

标签: jquery html css jquery-tools


【解决方案1】:

有一个offset 属性可用于将工具提示微调到正确位置:http://flowplayer.org/tools/tooltip/index.html#positioning。只需向上滚动到表格,它就会解释offset 属性。请确保您在多个浏览器上检查该站点,这样您就可以确定 offset 不需要更改。

在我看来,偏移量应该是[0, -150]。试试这个:

$(".tooltip").tooltip({
    track: true,
    delay: 0,
    showURL: false,
    showBody: " - ",
    fade: 250,
    offset : [0, -150]
});

【讨论】:

  • 感谢 SimpleCoder。我用偏移量更新了它,它在 Windows 和 Mac 上是不同的。 FF/Safari Mac 都将其显示在右侧约 150 像素处,而 IE6/7/8/FF/Chrome Windows 现在都显示它居中。似乎我可能需要解决根本问题,因为它们曾经最初是对齐的,但在项目过程中不知何故失控了。有什么想法吗?
  • 您很可能需要在不同的浏览器上测试该站点,因此您可以微调每个浏览器的偏移量。我不确定为什么实际需要偏移量,但只要偏移量有效,我认为使用它没有问题。
【解决方案2】:

关于源代码中的元素样式(用Firebug检查)我发现了这个:

#recording-tip

element.style 
{
display:none;
    left:371.5px;
opacity:0;
position:absolute;
top:391.2px;
}

这个左属性导致它显示在“错误”的位置。我为我的工具提示使用相同的插件,删除样式中的这个左属性,你应该设置:)

编辑: 又玩了一阵子,我发现这是jQuery自己添加的,但我使用的版本中没有,你是在使用自定义动画还是效果?

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-08-23
    • 1970-01-01
    • 1970-01-01
    • 2013-01-12
    相关资源
    最近更新 更多