Para aplicar varios de los conceptos vistos hasta ahora veamos una implementación de un Tooltip con DHTML Recordemos que un Tooltip es un mensaje que aparece sobre un objeto cuando disponemos la flecha del mouse sobre el, 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 con el contenido del texto de la propiedad title del div:

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
window.addEventListener('load',inicializarEventos,false);

function inicializarEventos()
{
  var vec=document.getElementsByTagName('div');
  for(f=0;f0)
    d.firstChild.nodeValue=texto;
  else
  {
    d.appendChild(document.createTextNode(texto));
  }
}

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

</script>
<style>
.cuadradito{
  background-color: #f00;
  height: 50px; 
  width: 50px;
  margin:3px;
  z-index: -1;

}

#divmensaje {
  background-color: yellow;
   position: absolute; 
   visibility: hidden; 
   padding: 5px;
  z-index: 100;
}
</style>
</head>
<body>
<p>Entre con el mouse al recuadro.</p>
<div class="cuadradito" title="este es el mensaje1"></div>
<div class="cuadradito" title="este es el mensaje2"></div>
<div class="cuadradito" title="este es el mensaje3"></div>
<div class="cuadradito" title="este es el mensaje4"></div>
</body>
</html>

Ver ejemplo anterior

El código HTML no tiene nada de extraño, salvo inicializar la propiedad title de cada div (ese contenido aparecerá en el Tooltip)

El código javascript es:

window.addEventListener('load',inicializarEventos,false);

function inicializarEventos()
{
  var vec=document.getElementsByTagName('div');
  for(f=0;f0)
    d.firstChild.nodeValue=texto;
  else
  {
    d.appendChild(document.createTextNode(texto));
  }
}

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

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++)
  {sss
    vec[f].addEventListener('mouseover',mostrarToolTip,false);
    vec[f].addEventListener('mouseout',ocultarToolTip,false);
    vec[f].addEventListener('mousemove',mostrarToolTip,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 extrae el contenido de la propiedad title y reubica el div según la coordenada actual del mouse:

function mostrarToolTip(e) 
{
  var d = document.getElementById("divmensaje");
  d.style.visibility = "visible";
  texto=e.target.getAttribute('title');
  d.style.left = e.clientX + document.body.scrollLeft + 15;
  d.style.top = e.clientY + document.body.scrollTop + 15;
  if (d.childNodes.length>0)
    d.firstChild.nodeValue=texto;
  else
  {
    d.appendChild(document.createTextNode(texto));
  }
}

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

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

(adsbygoogle = window.adsbygoogle || []).push({});

Mostrar un Tooltip