Hola caricatos, efectivamente de la faq obtuve el script para obtener las coordenadas del ratón :)
Lo puse así, pero no me está funcionando como debiera o quisiera:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>azTT ToolTip</title>
<script type="text/javascript">
var mousePos
function getElementsByClassName(strClass, strTag, objContElm) {
//Obtenida de: http://muffinresearch.co.uk/archives/2006/04/29/getelementsbyclassname-deluxe-edition/
strTag = strTag || "*";
objContElm = objContElm || document;
var objColl = objContElm.getElementsByTagName(strTag);
if (!objColl.length && strTag == "*" && objContElm.all) objColl = objContElm.all;
var arr = new Array();
var delim = strClass.indexOf('|') != -1 ? '|' : ' ';
var arrClass = strClass.split(delim);
for (var i = 0, j = objColl.length; i < j; i++) {
var arrObjClass = objColl[i].className.split(' ');
if (delim == ' ' && arrClass.length > arrObjClass.length) continue;
var c = 0;
comparisonLoop:
for (var k = 0, l = arrObjClass.length; k < l; k++) {
for (var m = 0, n = arrClass.length; m < n; m++) {
if (arrClass[m] == arrObjClass[k]) c++;
if ((delim == '|' && c == 1) || (delim == ' ' && c == arrClass.length)) {
arr.push(objColl[i]);
break comparisonLoop;
}
}
}
}
return arr;
}
function prepara_tooltips(){
var coleccion = getElementsByClassName('azTT');
for (var i = 0; i < coleccion.length; i++) {
if(coleccion[i].title != ''){
titulo = coleccion[i].title;
coleccion[i].title = '';
if(coleccion[i].textContent != ''){
coleccion[i].style.borderBottom = '1px dashed #FF0000';
}
nuevo_span = document.createElement('span');
nuevo_span_texto = document.createTextNode(titulo);
nuevo_span.appendChild(nuevo_span_texto);
nuevo_span.setAttribute('id', 'azTT' + i)
nuevo_span.style.display = 'none';
nuevo_span.style.position = 'absolute';
nuevo_span.style.border = '1px solid #000000';
nuevo_span.style.background = '#FFCC00';
// nuevo_span.style.top = coleccion[i].offsetTop + 20 + 'px';
// nuevo_span.style.left = coleccion[i].offsetLeft + 5 + 'px';
nuevo_span.style.padding = '2px';
coleccion[i].parentNode.insertBefore(nuevo_span, coleccion[i]);
// GRACIAS a Panino5001 (http://www.forosdelweb.com/member.php?u=65984)
coleccion[i].paninoIndex = 'azTT' + i;
coleccion[i].onmouseover = function(){tooltipsOn(this, this.paninoIndex)};
coleccion[i].onmouseout = function(){tooltipsOff(this.paninoIndex)};
}
}
}
function tooltipsOn(elem, azTT){
azTT = document.getElementById(azTT);
azTT.style.display = 'block';
azTT.style.top = mousePos.y + 5 + 'px';
azTT.style.left = mousePos.x + 5 + 'px';
}
function tooltipsOff(azTT){
azTT = document.getElementById(azTT);
azTT.style.display = 'none';
}
function mouseMove(ev){
ev = ev || window.event;
// var mousePos = mouseCoords(ev);
mousePos = mouseCoords(ev);
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
document.onmousemove = mouseMove;
window.onload = prepara_tooltips;
</script>
</head>
<body">
<h1 onclick="alert(mousePos.x)">azTT ToolTips</h1>
<p>Se trata de un generador de tooltips que utiliza <dfn title="Javascript" class="azTT">JS</dfn> para rescatar el atibuto title de todos los elementos que tengan una clase <dfn title="Cascade Style Sheet" class="azTT">CSS</dfn> llamada azTT. Sale a raíz del mensaje <a href="http://www.forosdelweb.com/showthread.php?t=507336" target="_blank">Descripción emergente en imageboton</a> publicado en <strong class="azTT" title="Foros del Web">FDW</strong> y no es más que un ejercicio que me servirá para aprender un poco.</p>
<p>Aplicado sobre una imagen:<br /><img src="http://www.forosdelweb.com/fdwtheme/mdw-powered.gif" alt="Maestros del Web" title="Maestros del Web" class="azTT" /></p>
<fieldset>
<legend>Aplicado sobre los input's</legend>
<form id="form1" name="form1" method="post" action="">
<label for="usuario">Usuario</label>
<input type="text" name="usuario" id="usuario" class="azTT" title="Introduzca su nombre de usuario" /><br />
<label for="password">Password</label>
<input type="text" name="password" id="password" class="azTT" title="Introduzca su contraseña" /><br />
<input type="submit" name="enviar" value="Enviar" id="enviar" class="azTT" title="Presione aquí para ingresar" />
</form>
</fieldset>
</body>
</html>
Lo que hace es... algo así como detectar las coordenadas del roedor al producirse el evento onmouseover establecido en la función prepara_tooltips(). Cuando el ratón entra por primera vez en el elemento que dispara el inmouseover, se muestra el tooltip apareciendo en las coordenadas especificadas (X+5 e Y+5), pero luego, al mover el ratón sobre el elemento y posicionarse éste sobre el tooltip, es cuando nuevamente se dispara el onmouseover produciendo un desplazamiento del tooltip un tanto brusco.
Supongo que debería tener dentro de la función tooltipsOn() la llamada a onmousemove, para que el desplazamiento sea fluido, pero no me está saliendo!!
Alguna sugerencia?
Edit: Tuve que definir
var mousePos fuera de toda función para poder acceder a
mousePos.x y
mousePos.y desde tooltipsOn()... ¿esto tiene sentido?