Tooltip z-index over floated container div

Hi,

I have the following code, which floats divs alongside each other. Each div contains a tooltip, which appears on mouseover of the div:

CSS:


div.container {
    float: left;
    position: relative;
}
div.tooltip {
    position: absolute;
    z-index: 999
}

HTML:


<div class="container">
    Container div 1
    <div class="tooltip">Tooltip 1</div>
</div>
<div class="container">
    Container div 2
    <div class="tooltip">Tooltip 2</div>
</div>
<div class="container">
    Container div 3
    <div class="tooltip">Tooltip 3</div>
</div>
<div class="container">
    Container div 4
    <div class="tooltip">Tooltip 4</div>
</div>

This is fine in firefox, IE8 and Safari, but in IE7 and 6 the tooltip appears underneath the container - as if it’s on a lower z-index. If I put ‘z-index: 1’ on the container class, it does the same thing in all browsers.

Can anyone see how to resolve this?

Thanks all…

Hmmm, something fishy there. That shouldn’t cause the tooltip to hide behind text in good browsers. I just tested and didn’t get that effect. How are you applying the z-index?

Double hmmm, this is the complete code from a test page I just set up. It works fine in Firefox and IE8, but not in IE7 or 6 (at least not the stand-alone versions I’m running). Does it work in IE7 for you?

<!DOCTYPE HTML>
<html lang="en">
<head>
	<title>Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		.container {
			float: left;
			width: 100px;
			height: 100px;
			background: #000;
			margin: 0 2px 2px 0;
			position: relative;
		}
		.tooltip {
			position: absolute;
			top: 10px;
			left: 10px;
			background: #f00;
			width: 100px;
			height: 100px;
			z-index: 2
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="tooltip">
			Tooltip content 1
		</div>
	</div>
	<div class="container">
		<div class="tooltip">
			Tooltip content 1
		</div>
	</div>
	<div class="container">
		<div class="tooltip">
			Tooltip content 1
		</div>
	</div>
	<div class="container">
		<div class="tooltip">
			Tooltip content 1
		</div>
	</div>
</body>
</html>

Do you mean the tooltips gets a position below (outside) their parent containers?

The auto positioning (position according to the flow) in IE may differ from in good browsers. Here it is auto-positioned after the div content but as it doesn’t expand a fluid parent height or move siblings, it would appear outside the parent.

Always try setting the coordinates if they are known, coordinates are according to nearest parent having position. E.g:

div.container {
    float: left;
    position: relative;
}
div.tooltip {
    top: 10&#37;;
    left: 10%;
    position: absolute;
    z-index: 999; /* (can not get above the positioned parent level regarding parent siblings) */
}

And you don’t need the z-index here. The AP box will still be over the div content. :slight_smile:

Edit)
Late hitting the submit button. :slight_smile:

Yes, the tooltip boxes are moved 10 pixels in all browsers I checked.

It’s not the offset that concerns me, it’s the fact that in IE7 and 6 the red ‘tooltip’ divs (albeit to keep the demo simple they don’t have any events, they’re just permanently visible) get hidden behind the next container div. The tooltips need to appear above the containers always.

To clarify, it is nothing but the z-index which concerns me. Everything is fine except the fact that the tooltip divs are appearing behind the next container divs. The tooltips need to appear above all other elements.

Thanks for clarifying. :slight_smile:

I guess you intend to display the tooltip on hovering the containers. Then you need to rise the stacking level on hover to make it work in IE:


	<style type="text/css">
		.container {
			float: left;
			width: 100px;
			height: 100px;
			background: #000;
			margin: 0 2px 2px 0;
			position: relative;
			z-index: 1;
		}
		.container:hover {
			z-index: 2;
			visibility: visible;
		}
		.tooltip {
			position: absolute;
			top: 10px;
			left: 10px;
			background: #f00;
			width: 100px;
			height: 100px;
		}
	</style>

Have you tried this Erik? It doesn’t work in any browser.

EDIT: actually it does work, my bad, thanks Erik!

Now I have tested, and it does works in all browsers. :slight_smile:

I can’t get it to work in IE6, but I’ve used the principle to do the z-layer on hover through Javascript, so it’s now working perfectly. Much appreciated.

I can’t get it to work in IE6, …
Of course not, IE6 doesn’t support hover on anything but links. Sorry I didn’t mention that. :slight_smile:

Well done, javascript would be the solution for IE6.