[RESOLVED] getting the z-index to work properly
I'm trying to achieve the same tooltip effect that you see in Windows Explorer, where if you drag the left navigation pane so that it's too narrow for the contents, a tooltip will appear over an item when you position the mouse pointer over it, which extends past the navigation pane border, like so:
I've been able to get it to partially work in my css implementation:
But this only works if I don't scroll the navigation pane div. Because the tooltip is absolutely positioned relative to the page, if I scroll down slightly before hovering my mousever a link, the tooltip will appear below the link rather than inside of it.
If I set the navigation pane div position to any other value besides static, it fixes the scrolling problem. The tooltip will always appear inside the link regardless of the scroll position. But now the z-index property doesn't work, so the tooltip won't extend out past the right border of the navigation pane:
In case it's relevant, the "links" are actually two divs with the following structure:
The navigation_pane_link is the one the turns bright blue on mouseover. The navigation_pane_link_content is the one with the left margin offset that turns into a tooltip on mouseover if there isn't enough horizontal space to display its contents.
<div class="navigation_pane_link_content">Link Text</div>