[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>
I still couldn't scroll the navigation pane with my scroll wheel if the mouse pointer was positioned over the tooltip, so I created two versions of the tooltip. One relatively positioned tooltip with a zIndex of 3 and an absolutely positioned tooltip directly behind it with a zIndex of 2.
The relatively positioned tooltip doesn't extend out past the right side of the div, but the absolutely positioned one does, so it picks up where the first one leaves off and it looks like one continuous div. Now my scroll-wheel works too.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread