Hola mi querido amigo aca esta la solucion para tu pregunta:
Como no me gusta adorname con plumas ajenas para realizar este algoritmo me guie de la siguiente pagina: www.ajaxya.com.ar/
Si tienes alguna duda me puedes escribir a mi correo o contactarme por skype: aderiver
ejemplo.html
<html>
<head>
<title>Problema</title>
<script languaje="javascript" type="text/javascript">
//en el momento de cargarse la pagina ejecuto la funcion Iniciar Eventos
addEvent(window,'load',inicializarEventos,false);
function inicializarEventos()
{
//obtengo todos los campos te texto
var vec=document.getElementsByTagName('input');
//recorro todos los campos de texto
for(f=0;f<vec.length;f++)
{
//con esto permito capturas los eventos de cada campo de texto, cuando el mouse esta encima, fuera
addEvent(vec[f],'mouseover',mostrarToolTip,false);
addEvent(vec[f],'mouseout',ocultarToolTip,false);
addEvent(vec[f],'mousemove',actualizarToolTip,false);
}
//utilizo las funciones del DOM para crear la capa que contiene el mensaje
//creo una etiqueda div
var ele=document.createElement('div');
//le agrego un id
ele.setAttribute('id','divmensaje');
//la añado a la pagina web despues de la etiqueda body
vec=document.getElementsByTagName('body');
//agrego la etiqueda en la pagina web
vec[0].appendChild(ele);
}
function mostrarToolTip(e)
{
//accedo a la capa donde voy a poner el msn
var d = document.getElementById("divmensaje");
//hago la capa visibel
d.style.visibility = "visible";
//si el navegador no cumple con los estandares o sea explorer
if (window.event)
//accedo a las propiedades del objeto que inicio el evento
e=window.event;
//posicion del mensaje
d.style.left = e.clientX + document.body.scrollLeft + 15;
d.style.top = e.clientY + document.body.scrollTop + 15;
var ref;
if (window.event)
ref=window.event.srcElement;
else
// si el navegador es firefox opera, que cumple con los estandares de la w3
if (e)
//accedo a las propiedades del elemento que inicio el evento
ref=e.target;
//cargo la funcion que se trae los datos del servidor
recuperarServidorTooltip(ref.getAttribute('id'));
}
function actualizarToolTip(e)
{
if (window.event)
e=window.event;
var d = document.getElementById("divmensaje");
d.style.left = e.clientX + document.body.scrollLeft + 15;
d.style.top = e.clientY + document.body.scrollTop + 15;
}
function ocultarToolTip(e)
{
var d = document.getElementById("divmensaje");
d.style.visibility = "hidden";
}
var conexion1;
function recuperarServidorTooltip(codigo)
{
conexion1=crearXMLHttpRequest();
conexion1.onreadystatechange = procesarEventos;
conexion1.open('GET','ejemplo.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 = '<img src="../cargando.gif">';
}
}
//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captura);
return true;
}
else
return false;
}
function crearXMLHttpRequest()
{
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}
</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;
width:250px;
z-index: 100;
}
</style>
</head>
<body>
<table>
<TR>
<TD>Nombre:</TD>
<TD><input type="text" name="nombre" id="c1"></TD>
</TR>
<TR>
<TD>Apellidos:</TD>
<TD><input type="text" name="nombre" id="c2"></TD>
</TR>
<TR>
<TD>Nota:</TD>
<TD><input type="text" name="nombre" id="c3"></TD>
</TR>
</table>
</body>
</html>
ejemplo.php
<?php
if ($_REQUEST['cod']=='c1')
{
echo "En este campo digita tu nombre";
}
if ($_REQUEST['cod']=='c2')
{
echo "En este campo digita tu apellido";
}
if ($_REQUEST['cod']=='c3')
echo "En este campo digita tus comentarios";
if ($_REQUEST['cod']=='c4')
echo "<p>Cuarto tooltip.</p>";
?>
Hasta la proxima
