www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] getting the z-index to work properly

Hybrid View

  1. #1
    Join Date
    Oct 2009
    Posts
    69

    resolved [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:

    shot1.png

    I've been able to get it to partially work in my css implementation:

    shot2.png

    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:

    shot3.png

    In case it's relevant, the "links" are actually two divs with the following structure:

    Code:
    <div class="navigation_pane_link">
       <div class="navigation_pane_link_content">Link Text</div>
    </div>
    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.

  2. #2
    Join Date
    Oct 2009
    Posts
    69
    Finally worked out a solution. I added a bit of javascript to the onscroll event of the navigation pane. I subtracted the scrollHeight of the navigation pane from the offsetTop position of the link in order to reposition the tooltip every time I scrolled.

    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles