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 donse se almacenan las páginas. ( <img src="imagen1.jpg"> )

pagina1.html

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</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>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</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