Question

我准备了一个jsfiddle示例：

问题是我有一个位置相对的容器（无法更改）。我找到了工具提示设置relative: true，它应该解决我的问题（它使用jQuery位置而不是偏移来设置工具提示位置）。如果我没有溢出：auto（这也不能更改），这样可以正常工作。滚动容器然后单击帮助图标时，工具提示将获取相对于容器的位置，但不会考虑滚动。这导致错误的工具提示。

有谁知道如何解决这个问题？

奖金问题：当您第一次点击工具提示时，您将获得配置的动画。当您关闭工具提示并再次单击帮助图标时，工具提示会弹出而不显示动画。如何改变这种行为，所以它在显示时总会得到一个漂亮的动画？

Answer 1

我不太了解这个插件/工具包的事情来评论如何修复 - 所以我建议你自己编写代码。

你可以相当容易地编写一些代码，只需在每个工具提示按钮旁边使用带有display：none的样式div。单击该按钮时，切换工具提示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();
});

Answer 2

太棒了。我一直想着解决方案几个小时，现在它只是打击了我：

.editor-field
{
 position: relative;  
}

瞧。奖金问题仍然存在。

jQuery工具：位置相对和溢出的工具提示错误：父容器上的auto; jsfiddle例子;怎么解决？

2 个答案: