0

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

Edited by happygeek: fixed formatting

4
Contributors
4
Replies
5
Views
10 Years
Discussion Span
Last Post by autocrat
1

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

<? if (isset($_SERVER['HTTP_USER_AGENT']) && 				(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') == true)) { ?>

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.

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.