jQuery Tools: tooltips bug with position relative and overflow: auto on the parent container; jsfiddle example; how to fix it? -

i prepared jsfiddle example:

http://jsfiddle.net/peh7t/11/

the problem have container position relative (which cannot changed). found tooltip setting relative: true, supposed solve problem (it uses jquery position instead of offset set tooltip position). work fine, if did not have overflow: auto (this cannot changed either). when scroll container , click on icon tooltip gets position relative container, not take scroll account. results in misplaced tooltips.

does know how fix this?

bonus question: when click on tooltip first time configured animation. when close tooltip , click icon again, tooltip pops without animation. how change behavior, gets nice animation when being shown?

i don't know enough plugin / toolkit thing comment on how fix - instead i'd recommend code own.

you code easily, using styled divs display:none next each of tooltip buttons. when button clicked, toggle tooltip div. way total control , don't have work around or shoehorn existing code.

example:

css

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

html

<!-- tooltips inline, positioned want --> <div class='somecontainer'>   <div class='_js_tooltip'>this tooltip</div>   <div class='_js_tooltip_button'>this button</div> </div>  <div class='somecontainer'>   <div class='_js_tooltip'>this tooltip</div>   <div class='_js_tooltip_button'>this button</div> </div> 

script

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