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


Para aplicar varios de los conceptos vistos hasta ahora veamos una implementación de un Tooltip con DHTML y recuperando la información a mostrar del servidor en forma asincrónica. Recordemos que un Tooltip es un mensaje que aparece sobre un objeto cuando disponemos la flecha del mouse sobre el mismo, este recuadro nos informa el objetivo de dicho control.

El archivo HTML muestra un conjunto de div (cuadrados), cuando pasamos la flecha del mouse sobre el cuadrado aparecerá un mensaje, este mensaje lo buscaremos en el servidor.

El archivo HTML es pagina1.html:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Problema</title>
  <script src="funciones.js"></script>
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body id="cuerpo">
  <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>

Luego tenemos el archivo estilos.css:

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

}

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

El archivo funciones.js:

addEventListener('load',inicializarEventos,false);

function inicializarEventos()
{
  var vec=document.getElementsByTagName('div');
  for(f=0;f<vec.length;f++)
  {
    vec[f].addEventListener('mouseover',mostrarToolTip,false);
    vec[f].addEventListener('mouseout',ocultarToolTip,false);
    vec[f].addEventListener('mousemove',actualizarToolTip,false);
  }
  var ele=document.createElement('div');
  ele.setAttribute('id','divmensaje');
  vec=document.getElementsByTagName('body');
  vec[0].appendChild(ele);

}

function mostrarToolTip(e) 
{

  var d = document.getElementById("divmensaje");
  d.style.visibility = "visible";
  d.style.left = (e.clientX + document.body.scrollLeft + 15)+'px';
  d.style.top = (e.clientY + document.body.scrollTop + 15)+'px';
  var ref;
  ref=e.target;
  recuperarServidorTooltip(ref.getAttribute('id'));
}

function actualizarToolTip(e) 
{
  var d = document.getElementById("divmensaje");
  d.style.left = (e.clientX + document.body.scrollLeft + 15)+'px';
  d.style.top = (e.clientY + document.body.scrollTop + 15)+'px';
}


function ocultarToolTip(e) 
{
  var d = document.getElementById("divmensaje");
  d.style.visibility = "hidden";
}

var conexion1;
function recuperarServidorTooltip(codigo) 
{
  conexion1=new XMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('GET','pagina1.php?cod='+codigo, true);
  conexion1.send();
}

function procesarEventos()
{
  var d = document.getElementById("divmensaje");
  d.style.visibility = "visible";
  if(conexion1.readyState == 4)
  {
    d.innerHTML=conexion1.responseText;
  } 
  else 
  {
    d.innerHTML = '<img src="../cargando.gif">';
  }
}
Primero obtenemos la referencia a todos los div de la página: 
  var vec=document.getElementsByTagName('div');
Definimos las funciones que se disparan para los eventos mouseover, mouseout y mousemove: 
  for(f=0;f<vec.length;f++)
  {
    vec[f].addEventListener('mouseover',mostrarToolTip,false);
    vec[f].addEventListener('mouseout',ocultarToolTip,false);
    vec[f].addEventListener('mousemove',actualizarToolTip,false);
  }

Podemos ver que enlazamos la misma función para los eventos mouseover y mousemove, esto debido a que en dicha función mostramos el Tooltip en la coordenada actual del mouse.
Por otro lado la función inicializarEventos crea un div y lo añade al árbol de objetos, este nos servirá para mostrar el mensaje:

  var ele=document.createElement('div');
  ele.setAttribute('id','divmensaje');
  vec=document.getElementsByTagName('body');
  vec[0].appendChild(ele);

La función mostrarTooltip obtiene la referencia del div que muestra el mensaje (hasta este momento está oculto) y cambia la propiedad visibility a "visible", luego llama a la función recuperarServidorTooltip(ref.getAttribute('id')).

function mostrarToolTip(e) 
{

  var d = document.getElementById("divmensaje");
  d.style.visibility = "visible";
  d.style.left = (e.clientX + document.body.scrollLeft + 15)+'px';
  d.style.top = (e.clientY + document.body.scrollTop + 15)+'px';
  var ref;
  ref=e.target;
  recuperarServidorTooltip(ref.getAttribute('id'));
}

La función ocultarTooTip solo oculta el div del mensaje.

function ocultarToolTip(e) 
{
  var d = document.getElementById("divmensaje");
  d.style.visibility = "hidden";
}

La función recuperarServidorTooltip recibe el valor del atributo id del div donde se encuentra la flecha del mouse. Se crea un objeto de la clase XMLHttpRequest y se envía el código del div respectivo.

var conexion1;
function recuperarServidorTooltip(codigo) 
{
  conexion1=new XMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('GET','pagina1.php?cod='+codigo, true);
  conexion1.send();
}

Luego la función procesarEventos carga el div y procede hacerlo visible:

function procesarEventos()
{
  var d = document.getElementById("divmensaje");
  d.style.visibility = "visible";
  if(conexion1.readyState == 4)
  {
    d.innerHTML=conexion1.responseText;
  } 
  else 
  {
    d.innerHTML = '<img src="../cargando.gif">';
  }
}

Por último el programa del servidor genera un trozo de HTML dependiendo del código de div enviado (pagina1.php):

<?php
  header('Content-Type: text/html; charset=utf-8');
  if ($_REQUEST['cod']=='c1')
  {
    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 "<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 "<p>Tercer tooltip.</p>";
  if ($_REQUEST['cod']=='c4')
    echo "<p>Cuarto tooltip.</p>";
?>

En la realidad estos datos generalmente se rescatan de una base de datos, pero para concentrarnos en lo esencial hemos dejado esto de lado.



Problema resuelto.


Implementar un Tooltip con DHTML y recuperando la información a mostrar del servidor en forma asincrónica.


pagina1.html



Ejecutar ejemplo



estilos.css




funciones.js




pagina1.php


Problema propuesto.

Agregar una imagen al tooltip. En el servidor ya hay cuatro imagenes llamadas imagen1.jpg, imagen2.jpg etc. y se encuentran en el directorio inmediatamente superior a donde se almacenan las páginas que codificará ( <img src="../imagen1.jpg"> )
Ver solución




pagina1.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Problema</title>
  <script src="funciones.js"></script>
  <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>
</body>
</html>
estilos.css
.cuadradito{
  background-color: #f00;
  height: 50px; 
  width: 50px;
  margin:3px;
  z-index: -1;

}

#divmensaje {
  background-color: yellow;
   position: absolute; 
   visibility: hidden; 
   padding: 5px;
   width:250px;
   z-index: 100;
}
funciones.js
addEventListener('load',inicializarEventos,false);

function inicializarEventos()
{
  var vec=document.getElementsByTagName('div');
  for(var f=0;f&lt;vec.length;f++)
  {
    vecp[f].addEventListener('mouseover',mostrarToolTip,false);
    vecp[f].addEventListener('mouseout',ocultarToolTip,false);
    vecp[f].addEventListener('mousemove',actualizarToolTip,false);
  }
  var ele=document.createElement('div');
  ele.setAttribute('id','divmensaje');
  vec=document.getElementsByTagName('body');
  vec[0].appendChild(ele);

}

function mostrarToolTip(e) 
{
  var d = document.getElementById("divmensaje");
  d.style.visibility = "visible";
  d.style.left = (e.clientX + document.body.scrollLeft + 15)+'px';
  d.style.top = ()e.clientY + document.body.scrollTop + 15)+'px';
  var ref;
  ref=e.target;
  recuperarServidorTooltip(ref.getAttribute('id'));
}

function actualizarToolTip(e) 
{
  var d = document.getElementById("divmensaje");
  d.style.left = (e.clientX + document.body.scrollLeft + 15)+'px';
  d.style.top = (e.clientY + document.body.scrollTop + 15)+'px';
}

function ocultarToolTip(e) 
{
  var d = document.getElementById("divmensaje");
  d.style.visibility = "hidden";
}

var conexion1;
function recuperarServidorTooltip(codigo) 
{
  conexion1=new XMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('GET','pagina1.php?cod='+codigo, true);
  conexion1.send(null);
}

function procesarEventos()
{
  var d = document.getElementById("divmensaje");
  d.style.visibility = "visible";
  if(conexion1.readyState == 4)
  {
    d.innerHTML=conexion1.responseText;
  } 
  else 
  {
    d.innerHTML = '&lt;img src="../cargando.gif"&gt;';
  }
}


pagina1.php
&lt;?php
  header('Content-Type: text/html; charset=utf-8');
  if ($_REQUEST['cod']=='c1')
  {
    echo "&lt;img src=\"../imagen1.jpg\"&gt;";
    echo "&lt;p&gt;Primer tooltip.&lt;/p&gt;";
    echo "&lt;p&gt;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&lt;/p&gt;";
  }
  if ($_REQUEST['cod']=='c2')
  {    
    echo "&lt;img src=\"../imagen2.jpg\"&gt;";
    echo "&lt;p&gt;Segundo tooltip.&lt;/p&gt;";
    echo "&lt;p&gt;bbbbbbbb bbbbbbbbbbb bbbbbbbb bbbbbbbbbbbbbb bbbbbbbbbbb bb";
    echo "bbbbbbbb bbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbb bbbbbbbbbbb bbb&lt;/p&gt;";
  }
  if ($_REQUEST['cod']=='c3')
  {
    echo "&lt;img src=\"../imagen3.jpg\"&gt;";
    echo "&lt;p&gt;Tercer tooltip.&lt;/p&gt;";
  }
  if ($_REQUEST['cod']=='c4')
  {
    echo "&lt;img src=\"../imagen4.jpg\"&gt;";
    echo "&lt;p&gt;Cuarto tooltip.&lt;/p&gt;";
  }

?&gt;
  Ejecutar ejemplo

Retornar