Tooltip Position Breaking on Scrolling Sidebar

Question

I am trying to achieve a Sidebar with Tooltip attach to its <li> elements like this: Screenshot - Good Tooltip

But whenever I scroll down to the bottom of the sidebar, The Tooltip position is breaking and is not sticking to its <li> element: Screenshot - Bad Tooltip .

Here is the: JSFiddle .

Your Idea and Suggestion would be really appreciated. Thank You!

Answer 1

Your tooltips elements have absolute positioning, with top property related to the body, not to their li parent. On loading, top value is OK, as calculated from the elements flow, but get wrong as you scroll, as it won't change...