I've implemented a tree view using HTML and CSS. When an item in this tree view is hovered, a tooltip appears under it. Everything's works great in Firefox, but not in Chrome or Firefox.

My problem is the tooltip is using absolute positioning to allow its content to display over other elements. When I scroll in Firefox, the positioning of these tooltips moves to reflect their new locations. However, Internet Explorer retains the original position of the elements. Thus if I hover over a scrolled elements, the tooltip displays under wherever the element was originally located.

I've read this could be fixed by adding position: relative to my tree view, but this would prevent the tooltips from hovering over the entire page.

Here's some example code to illustrate my problem:

<?xml version="1.0" encoding="utf-8" ?> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Example</title>

        <!-- import css files -->
        <link href="example.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="wrapper">
            <div id="tree-view">
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
                <a href="#">tooltip example
                    <span class="tooltip">
                        <strong>Info</strong>
                        <span class="tooltip-info">
                            Here is some information about the thing you're hovering over.
                        </span>
                    </span>
                </a>
            </div>
            <div id="main-content">
                main
            </div>
        </div>
    </body>
</html>

And here's the CSS for the example:

#wrapper
{
}

#tree-view
{
    float: left;
    width: 200px;
    height: 400px;
    background-color: #BBFFFF;
    overflow: auto;
}

#main-content
{
    float: left;
    width: 600px;
    height: 400px;
    background-color: #FFFFBB;
}

#tree-view a
{
    display: block;
    position: relative;
}

#tree-view a span.tooltip
{
    position: absolute;
    z-index: 100;
    display: none;
}

#tree-view a:hover span.tooltip
{
    /* positioning */
    margin-left: 1em;
    margin-top: 1em;
    display: block;
    position: absolute;

    /*formatting*/
    text-decoration: none;
    background: #DDD;
    border: 1px solid #BBB;
    padding: 5px;
    white-space: normal;
    width: 300px;
    color: black;
}

#tree-view .tooltip strong
{
    display: block;
}

#tree-view .tooltip .tooltip-info
{
    display: block;
}

If the position: relative tag is removed from the tooltip anchor, the tooltips display correctly in Firefox. However, this tag positions the tooltips correctly in Internet Explorer.

Thanks for the help.

  • a full sample of your code would be much more helpful... Tony Crockford over 6 years ago
  • Not sure if this has any thing to do with your problem but did you specifie the !DOCTYPE correctly Ralph Stone over 6 years ago
  • Thanks for the replies. I'm posting my some example code to better illustrate my problem. I ran it through the w3 validation service and is passed so hopefully my HTML is at least correct. helixed over 6 years ago

2 answers

0
points

<?xml version="1.0" encoding="utf-8" ?> will be forcing IE into quirks mode. take it out and it will attempt standards mode and you might find it will behave a little better.

I'll take a longer look at your code sample and see if I can suggest anything else if that doesn't cure it.

Answered over 6 years ago by Tony Crockford
  • That does seem to help things out a little bit, but the main problem is still there. If you remove that position: relative tag from the tree-view anchor selector, it should give you a better idea of what I'm looking for. helixed over 6 years ago
0
points

Sadly I think you'll find that IE needs to be given top and left when using position:absolute; and I tried a number of things, but I couldn't break the tooltip out of the box when it had the scrollbars on it.

You can do it without the scrollbars on the tree, but once you have overflow:scroll, then anything outside the box is clipped.

In the past I've done something similar by setting position:relative on the overall parent and setting different absolute positions for each tooltip, based on id of each link.

Answered over 6 years ago by Tony Crockford