jQuery工具:父容器上的位置相对和溢出:自动的工具提示错误；jsfiddle示例；如何修复它？

Question

我准备了一个jsfiddle示例：

http://jsfiddle.net/PEH7t/11/

问题是我有一个位置相对的容器(它不能改变)。我发现工具提示设置relative: true，这应该可以解决我的问题(它使用jQuery位置而不是偏移量来设置工具提示位置)。如果我没有overflow: auto (这也是不能改变的)，这将工作得很好。当您滚动容器，然后单击帮助图标时，工具提示将获得相对于容器的位置，但不会考虑滚动。这会导致工具提示放错地方。

有人知道怎么解决这个问题吗？

奖励问题:当你第一次点击工具提示时，你会得到配置好的动画。当您关闭工具提示并再次单击帮助图标时，将弹出没有动画的工具提示。如何改变这一行为，使其在显示时始终获得良好的动画效果？

Answer 1

太神奇了。我已经考虑了几个小时的解决方案，现在我突然想到：

.editor-field
{
 position: relative;  
}

瞧。奖金问题仍然悬而未决。

Answer 2

我对插件/工具包的了解还不够多，无法评论如何修复-所以我建议你编写自己的代码。

您可以编写一些代码来实现这一点，只需在每个工具提示按钮旁边使用带样式的div和display:none即可。单击该按钮时，切换工具提示div。这样你就获得了完全的控制权，而不必绕过或硬塞现有的代码。

示例：

css

.someContainer
{
    position:relative;
}
._js_tooltip
{
    display:none;
    width: 300px;
    height: 100px;
    position:absolute; /*relative to container*/
    top: 10px;
    right: 10px;
}

html

<!-- your tooltips are inline, positioned however you want -->
<div class='someContainer'>
  <div class='_js_tooltip'>this is a tooltip</div>
  <div class='_js_tooltip_button'>this is the button</div>
</div>

<div class='someContainer'>
  <div class='_js_tooltip'>this is a tooltip</div>
  <div class='_js_tooltip_button'>this is the button</div>
</div>

脚本

$('._js_tooltip_button').on('click', function(){
    $(this).siblings('._js_tooltip').toggle();
});