Tooltip Position Breaking on Scrolling Sidebar

user_18518566 0
Viewed 28

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!

UPDATE: So, I've followed the advice from the comment and used the scrollbar height to adjust the Tooltip position using JS. Here's the updated JSfiddle.

css html javascript
1 Answers

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...

user_4684450
Related