I have a problem, I have this tooltip scripting...

The tooltip goes at the back of the next image.


thanks guys

here is the script

a.info{
position:relative; /*this is the key*/
z-index:24; background-color:#FFF;
color:#000;
text-decoration:none}

a.info:hover{z-index:25;
background-color:#FFFFFF;
}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
padding:2px;
top:0em; left:1em; width:15em;
border:1px solid #0cf;
background-color:#cff; color:#000;
text-align: left;
font-family:Tahoma, Verdana, Arial;
font-size:12px;
}

use image as link wrapped in a DIV!

thanks

You could use for example z-index: -10; lower numbers will put an object in the background.

z-index is not well supported.

yes, it's true, but you can use a condition like this to deal with compatibility issues:


I'm using z-index and I haven't see strange issues http://agec.ath.cx/lead maybe you could see a solution there

Web developer toolbar in firefox is a great tool to see CSS properties and change values on the fly.

Just a quick guess, but you may find it's the classes.

If I'm correct, you have multiples of these "image pop-ups", all with the same classes.
so if you think about it, you have multiple little boxes with popup layers, all basically overlapping each other.

The problem occurs for the Popups though...

You have applied a z-index to the Links (a:info) when inactive and when hovered over.... but not applied a z-index to the actual tooltip/popup!
Try adding z-index: 30; to a.info:hover span
see what that gets you.