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!!