Con este código conseguimos poner a una tabla en cada una de sus celdas un tooltip diferente para cada fila, el resultado es algo así:
También podemos cargar el contenido del tooltip por ajax.
Aquí el código rápido de ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>TOOLTIP</title>
<style type="text/css">
table tr td{ background-color:yellow;}
.tooltip{ position: absolute; top: 0; left: 0; z-index: 3; display: none; background-color:red; }
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="http://jquery-simpletip.googlecode.com/files/jquery.simpletip-1.3.1.js"></script>
<script type="text/javascript">
$(function(){
$.each($("table tr td"),function(){
var cadena = $(this).parent().attr("id");
var pos = cadena.indexOf("_");
var id_producto = cadena.substr(pos+1);
$(this).simpletip({content: $("#tooltip_"+id_producto).html(), fixed: true , position: ["100", "-25"] });
});
});
</script>
</head>
<body>
<table>
<tr>
<th>Nombre</th>
<th>Dirección</th>
</tr>
<tr id="fila_1"><td>Pepe lopez</td><td>c/ el callejon 292</td></tr>
<tr id="fila_2"><td>Pepe Martinez</td><td>Perrito picasso 92</td></tr>
</table>
<div class="tooltip" id="tooltip_1">Tooltip de prueba1<img width="60" height="30" src="http://www.gamedealdaily.com/product_images/ps3sixaxis.jpg" alt="" /></div>
<div class="tooltip" id="tooltip_2">Tooltip de prueba2<img width="60" height="30" src="http://www.gamedealdaily.com/product_images/ps3sixaxis.jpg" alt="" /></div>
</body>
</html>
No hay comentarios:
Publicar un comentario