A mi me parece bien. Sólo le hice un ajuste para las imágenes, porque son los elementos que por su altura permiten tocar el tooltip con el mouse y cuando eso pasa el tooltip parpadea como loco. A ver qué te parece:
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">
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 = '';
nuevo_span = document.createElement('span');
nuevo_span_texto = document.createTextNode(titulo);
// nuevo_span_texto = document.createTextNode(coleccion[i].textContent);
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';
if(coleccion[i].nodeName=='IMG')AJUSTE=-1;else AJUSTE=1;
nuevo_span.style.top = coleccion[i].offsetTop + 20*AJUSTE + '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.paninoIndex)};
coleccion[i].onmouseout = function(){tooltipsOff(this.paninoIndex)};
}
}
}
function tooltipsOn(azTT){
document.getElementById(azTT).style.display = 'block';
}
function tooltipsOff(azTT){
document.getElementById(azTT).style.display = 'none';
}
window.onload = prepara_tooltips;
</script>
</head>
<body>
<h1>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" />
<br />
</form>
</fieldset>
</body>
</html>