WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Tooltip behind images

Reply
  Thread Tools Display Modes
Old 22nd March 12, 02:10 PM   #1
jpgonc
WLC Member
 
Join Date: Aug 2011
Posts: 6
Default Tooltip behind images

Hello, I am having an issue that's driving me nuts: My tooltip gets behind the images. Here's the code:

HTML Code:
<div id="continente">
   <div class="tabbertab">
    <h2>North America</h2>
      <p class="navega">
       <a class="dicasp" href="fotos.html?zona=NA&amp;pais=CA&amp;fotos=0" target="_blank"><img src="./imagens/ca.gif" alt="Canada"/><span>Canada</span></a><span>(0)</span>
       <a class="dicasp" href="fotos.html?zona=NA&amp;pais=CU&amp;fotos=0" target="_blank"><img src="./imagens/cu.gif" alt="Cuba"/><span>Cuba</span></a><span>(0)</span>
       <a class="dicasp" href="fotos.html?zona=NA&amp;pais=MX&amp;fotos=0" target="_blank"><img src="./imagens/me.gif" alt="Mexico"/><span>Mexico</span></a><span>(0)</span>
       <a class="dicasp" href="fotos.html?zona=NA&amp;pais=US&amp;fotos=0" target="_blank"><img src="./imagens/us.gif" alt="USA"/><span>United States</span></a><span>(0)</span>
............... etc... etc...
      </p>
   </div>
</div>
Code:
div#continente a.dicasp span { display: none; }
div#continente a.dicasp:hover span {
	position: absolute;
	display: block;
	left: 55%;
	top: 75%;
	background-color: #02111A;
	border: 1px solid #566670;
	padding: 5px;
	font: normal bold 16px "Nevis Bold", Tahoma, Georgia;
	color: #FFFFFF;
        width: 200px;
}
div#continente a.dicasp {
    position:relative;
    z-index:24;
}

.tabbertab {
	padding: 15px 0;
	border: 2px groove #FFFFFF;
	height: 110px; 
}
Everything works fine, but the tooltip gets behind the images that are below.
The images are 30:30 pixel with each of them with a country code and are about 160 all stacked neated in the tabbertab class. 3 rows of images. For instance, if I put the mouse pointer over the first one, the tooltip gets behind the second and all the others images.
jpgonc is offline   Reply With Quote
Old 23rd March 12, 11:35 AM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,196
Default Re: Tooltip behind images

Give the "tooltip element" a higher position in the stacking order. (z-index)
chrishirst is offline   Reply With Quote
Old 23rd March 12, 01:19 PM   #3
jpgonc
WLC Member
 
Join Date: Aug 2011
Posts: 6
Default Re: Tooltip behind images

Quote:
Originally Posted by chrishirst View Post
Give the "tooltip element" a higher position in the stacking order. (z-index)
I messed around with that too, but to no avail... maybe bad CSS structuring?
jpgonc is offline   Reply With Quote
Old 23rd March 12, 04:09 PM   #4
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,196
Default Re: Tooltip behind images

Possibly, but with 160 following sibling elements in the stacking order, the z-index will need to be more than 24 to bring it to the top.
chrishirst is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 05:54 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.