Ayuda con Tooltips

[el_tigre]

Amigos, vengo trabajando una imágenes en bloque y le quiero agregar el Tooltips pero el texto me sale detrás de la imagen, no sé como arreglar este asunto.

Este es el código del Html.

Código HTML:

<table width="384" border="0" cellspacing="3" cellpadding="3">
  <tr>
       <td width="96" height="96" scope="row">
          <a href="mpas/1.jpg" class="tooltip" rel="lightbox" >
          <span>La División de las 12 Tribus de Israel</span>
          <img src="mpas/peque/1.jpg" width="96" height="96" alt="1"/></a> 
       </td>
       <td width="96" height="96" scope="row">
	  <a href="mpas/2.jpg" rel="lightbox" class="tooltip">
          <span>Canana en los Tiempos del A.T.</span>
	  <img src="mpas/peque/2.jpg" width="96" height="96" alt="2"/></a>
       </td>
       <td width="96" height="96" scope="row">
	  <a href="mpas/3.jpg" rel="lightbox" class="tooltip">
	  <img src="mpas/peque/3.jpg" width="96" height="96" alt="3"/>
          <span>El Exodo de los Israelitas</span></a>
	</td>
        <td width="96" height="96" scope="row">
	   <a href="mpas/4.jpg" rel="lightbox" class="tooltip">
	   <img src="mpas/peque/4.jpg" width="96" height="96" alt="4"/>      
           <span>Elías y Eliseo</span></a></td>
        </tr>
.......................

y este es el CSS

Código HTML:

a.tooltip{
    position:relative;
    z-index:24; background-color:#ccc;
    text-decoration: none;
  }

  a.tooltip span{
    display: none;
  }

  a.tooltip:hover span{
    display:block;
    position:absolute;
    top:20px; left:20px;
    padding: 5px;
    width:150px;
    border:1px solid #000;
    background-color:#FFFFAA;
    color:#000;
  }

[Mikmoro]

¿En los 4 casos o sólo en algunos?

[el_tigre]

Tengo 17 cuadros (imágenes) en todos los casos el tooltips está detrás de la imagen, salvo en las 3 últimas filas donde no hay img se ve el tooltips....

[Mikmoro]

Debe tratarse de algún otro estilo de tu css, porque viendo sólo el del tooltip no tiene ninguna lógica: el tip debe salir más abajo que la imagen, que es donde sale.

¿Tienes algún estilo genérico aplicado a las imágenes, como algún float o así?

(por ciento, te habrás dado cuenta de que eso en IE6 no va a funcionar tal y como está).

[el_tigre]

Claro amigo, uso otra clase (rel="lightbox") lo que hace es mostrar la imagen en popup en su tamaño real.....quizá sea eso, pero igual como solucionarlo?, y eso de que en IE no funciona como hago también eso?

Saludos y gracias por su interés.

[Mikmoro]

Para que funcione en IE6 debes añadir este selector:

a.tooltip:hover {background-color: transparent;}

El asunto de las imágenes supongo que deberás investigar en la hoja del lightbox o en la general cómo trata las imágenes antes de apliarlas.

[el_tigre]

Gracias amigo investigaré un poco :)

[el_tigre]

Realmente el contenido del CSS del lightbox es grande y no es masticable por mi, pero acá pongo el código, algo debe estar afectándolo, acabo de probar en IE y va encima pero cuando el texto es largo se oculta detrás de la img siguiente

Código HTML:

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: 2; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

[Mikmoro]

Antes de volverte muy loco buscando, prueba a ponerlo así:

a.tooltip {background-color:#ccc;
text-decoration: none;
}
a.tooltip:hover {background: transparent;
position:relative;
}
a.tooltip span {display: none;}

a.tooltip:hover span {display:block;
position:absolute;
top:20px; left:20px;
padding: 5px;
width:150px;
border:1px solid #000;
background-color:#FFFFAA;
color:#000;
z-index:10;
}

Ya contarás.