Question

I prepared a jsfiddle example:

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

The problem is that I have a container with position relative (which cannot be changed). I found tooltip setting relative: true, which is supposed to solve my problem (it uses jQuery position instead of offset to set the tooltip position). This would work fine, if I did not have overflow: auto (this cannot be changed either). When you scroll the container and then click on help icon the tooltip gets the position relative to the container, but does not take the scroll into account. It results in misplaced tooltips.

Does anyone know how to fix this?

Bonus question: when you click on the tooltip for the first time you get the configured animation. When you close the tooltip and click help icon again, the tooltip pops up without the animation. How to change that behavior, so it always gets a nice animation when being shown?

Answer 1

It’s amazing. I have been thinking for hours on a solution and now it just hit me:

.editor-field
{
 position: relative;  
}

Voila. The bonus question is still open.