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;
  }