Foros del Web » Creando para Internet » CSS »

Ayuda con Tooltips

Estas en el tema de Ayuda con Tooltips en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/10/2008, 11:30
Avatar de el_tigre  
Fecha de Ingreso: febrero-2006
Ubicación: Perú
Mensajes: 1.022
Antigüedad: 11 años, 10 meses
Puntos: 8
De acuerdo Ayuda con Tooltips

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;
  }
  #2 (permalink)  
Antiguo 17/10/2008, 11:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda con Tooltips

¿En los 4 casos o sólo en algunos?
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 17/10/2008, 11:51
Avatar de el_tigre  
Fecha de Ingreso: febrero-2006
Ubicación: Perú
Mensajes: 1.022
Antigüedad: 11 años, 10 meses
Puntos: 8
Respuesta: Ayuda con Tooltips

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....
  #4 (permalink)  
Antiguo 17/10/2008, 12:07
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda con Tooltips

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á).
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 17/10/2008, 12:19
Avatar de el_tigre  
Fecha de Ingreso: febrero-2006
Ubicación: Perú
Mensajes: 1.022
Antigüedad: 11 años, 10 meses
Puntos: 8
Respuesta: Ayuda con Tooltips

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.
  #6 (permalink)  
Antiguo 17/10/2008, 12:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda con Tooltips

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.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 17/10/2008, 12:48
Avatar de el_tigre  
Fecha de Ingreso: febrero-2006
Ubicación: Perú
Mensajes: 1.022
Antigüedad: 11 años, 10 meses
Puntos: 8
Respuesta: Ayuda con Tooltips

Gracias amigo investigaré un poco :)
  #8 (permalink)  
Antiguo 17/10/2008, 12:57
Avatar de el_tigre  
Fecha de Ingreso: febrero-2006
Ubicación: Perú
Mensajes: 1.022
Antigüedad: 11 años, 10 meses
Puntos: 8
Respuesta: Ayuda con Tooltips

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; }
  #9 (permalink)  
Antiguo 17/10/2008, 17:37
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda con Tooltips

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

Cita:
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.
__________________
Visita mi nueva web idplus.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:48.