Disclaimer
This question is a repost. I originally asked it here. While there was one person who was kind enough to help me, he ultimately couldn’t find an ideal solution. The reality of the situation is Doctype just doesn’t have the huge number of users that Stack Overflow does. This is an important problem for me, and I really need more opinions on it.
The Problem
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:
<!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, without it the tooltips don’t display correctly in Internet Explorer.
Thanks for the help.
I stopped using my own Tooltips and switched over to Qtip (http://craigsworks.com/projects/qtip/)a while back. It’s cross-browser tested, simple to instantiate, and looks outstanding. If you happen to be a ThemeRoller user, the beta version (available in the nightly builds) fully supports ThemeRoller styling. Overall, I’d highly recommend considering it to make life easy….it’s just less brain-damage.
In the upcoming release of JQuery UI, there will be a similar feature built into the core. Similar scripts are available for Dojo, Prototype, and MooTools.