Foros del Web » Programando para Internet » Jquery »

Crear ventana emergente al pasar elr aton por encima

Estas en el tema de Crear ventana emergente al pasar elr aton por encima en el foro de Jquery en Foros del Web. Buenas, Tengo un problema y es uqe hago una consulta desde una base de datos, generando una tabla con informacion: ID Factura Nombre cliente Importe ...
  #1 (permalink)  
Antiguo 11/07/2015, 10:28
 
Fecha de Ingreso: marzo-2009
Mensajes: 395
Antigüedad: 15 años
Puntos: 11
Crear ventana emergente al pasar elr aton por encima

Buenas,

Tengo un problema y es uqe hago una consulta desde una base de datos, generando una tabla con informacion:

ID Factura Nombre cliente Importe
1 123 Juan 100
2 178 Marta 221
...


EL caso es que cuando paso el raton sobre el nombre de cliente, el cual va dentro de un <a href="#" class="pedido"> quiero que me aparezca la información del pedido que llevava la factura, en una tablita

Para ello, he creado una capa oculta de nombre class="tooltip" y pongo lo siguientte:
Código:
<div class="tooltip">       
<table>
<tr><td>Impresora</td><td>120€</td></tr>
<tr><td>Raton</td><td>10€</td></tr>
</table>
</div>
Y para que se muestre y se oculte la capa uso tanto css como jquery:

CSS:
Código:
.pedido{
font-size:16px;
margin:0;
padding:0;
display:block;
cursor:pointer;
}
.tooltip{
 display:none;
    position:absolute;
	background:#fff;
}
JQUERY:
Código:
<script>

 $(document).ready(function() {
          $('.pedido').hover(function(ev){
    $('.tooltip').stop(true,true).fadeIn(); 
},function(ev){
    $('.tooltip').stop(true,true).fadeOut();
}).mousemove(function(ev){
    $('.tooltip').css({left:ev.layerX+10,top:ev.layerY+10});
});
        });
</script>
El código funciona bien salvo por una cosa, que al pasar el raton por encima de uno me muestra todos los divs "tooltip" generados, es decir, tantos divs como facturas salgan en la tabla.

Es porque no he definido de manera unequivoca cada div, pero como puedo hacerlo para luego definir una función para cada uno de los divs que se generen???

Gracias!!
  #2 (permalink)  
Antiguo 11/07/2015, 11:09
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 3 meses
Puntos: 208
Respuesta: Crear ventana emergente al pasar elr aton por encima

Si el tooltip en el HTML esta encerrado por las etiquetas con clase pedido, podes usar $(this).children(".tooltip") en lugar de solo $(".tooltip").. Asi al hacer hover sobre .pedido, solo va a aplicar la funcion javascript a su elemento hijo con clase .tooltip y no a todos los elementos con esa clase..

Etiquetas: emergente, encima, ventana
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 17:54.