32 - Mostrar un tooltip con datos recuperados del servidor en forma asincrónica

Implementaremos un problema utilizando todos los conceptos aprendidos hasta ahora.

ProblemaImplementar un Tooltip con jQuery recuperando la información a mostrar del servidor en forma asincrónica.
Agregar una imagen al tooltip. En el servidor ya hay cuatro imágenes llamadas imagen1.jpg, imagen2.jpg etc. y se encuentran en el directorio inmediatamente superior a donde se almacenan las páginas. ( <img src="../imagen1.jpg"> )

pagina1.html

<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<p>Entre con el mouse al recuadro.</p>
<div class="cuadradito" id="c1"></div>
<div class="cuadradito" id="c2"></div>
<div class="cuadradito" id="c3"></div>
<div class="cuadradito" id="c4"></div>
</body>
</html>

estilos.css

.cuadradito{
  background-color: #f00;
  height: 50px; 
  width: 50px;
  margin:3px;
  z-index: -1;
}

#divmensaje {
  background-color: yellow;
   position: absolute; 
   padding: 5px;
   width:250px;
   left:120px;
   top:100px;
  z-index: 100;
}

funciones.js

$(document).ready(function () {
  $("body").append('<div id="divmensaje">hhhh</div>');
  $("#divmensaje").hide();
  $(".cuadradito").hover(function (e) {
    $("#divmensaje").show();
    $("#divmensaje").css("left",e.clientX+document.body.scrollLeft+5);
    $("#divmensaje").css("top",e.clientY+document.body.scrollTop+5);
    $("#divmensaje").load("pagina1.php?cod="+$(this).attr('id'));
  },
  function () {
    $("#divmensaje").hide();
  })
  $(".cuadradito").mousemove(function (e){
    $("#divmensaje").css("left",e.clientX+document.body.scrollLeft+5);
    $("#divmensaje").css("top",e.clientY+document.body.scrollTop+5); 
  })
})

pagina1.php

<?php
if ($_REQUEST['cod']=='c1')
{
  echo "<img src=\"../imagen1.jpg\">";
  echo "<p>Primer tooltip.</p>";
  echo "<p>aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaaa";
  echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaaa";
  echo "aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaaaa aaaaaaa";
  echo "aaaaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaaa";
  echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaaaa</p>";
}
if ($_REQUEST['cod']=='c2')
{ 
  echo "<img src=\"../imagen2.jpg\">";
  echo "<p>Segundo tooltip.</p>";
  echo "<p>bbbbbbbb bbbbbbbbbbb bbbbbbbb bbbbbbbbbbbbbb bbbbbbbbbbb bb";
  echo "bbbbbbbb bbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbb bbbbbbbbbbb bbb</p>";
}
if ($_REQUEST['cod']=='c3')
{
  echo "<img src=\"../imagen3.jpg\">";
  echo "<p>Tercer tooltip.</p>";
}
if ($_REQUEST['cod']=='c4')
{
  echo "<img src=\"../imagen4.jpg\">";
  echo "<p>Cuarto tooltip.</p>";
}
?>

Como podemos ver el código JavaScript utilizando la librería jQuery queda muy compacto y reducido:

$(document).ready(function () {
  $("body").append('<div id="divmensaje">hhhh</div>');
  $("#divmensaje").hide();
  $(".cuadradito").hover(function (e) {
    $("#divmensaje").show();
    $("#divmensaje").css("left",e.clientX+document.body.scrollLeft+5);
    $("#divmensaje").css("top",e.clientY+document.body.scrollTop+5);
    $("#divmensaje").load("pagina1.php?cod="+$(this).attr('id'));
  },
  function () {
    $("#divmensaje").hide();
  })
  $(".cuadradito").mousemove(function (e){
    $("#divmensaje").css("left",e.clientX+document.body.scrollLeft+5);
    $("#divmensaje").css("top",e.clientY+document.body.scrollTop+5); 
  })
})


Retornar