Interesante script en javascript que permite mostrar tooltips a partir del atributo title de un elemento. En este caso la función está preparada para mostrar el tooltip en las imágenes. Para, por ejemplo, hacer lo mismo con los enlaces tan solo deberíamos cambiar la instrucción getElementsByTagName('img') por getElementsByTagName('a').
function showTT(el) {
var ttext=el.title;
var tt=document.createElement('SPAN');
var tnode=document.createTextNode(ttext);
tt.appendChild(tnode);
el.parentNode.insertBefore(tt,el.nextSibling);
tt.className="tt";
el.title="";
}
function hideTT(el) {
var ttext=el.nextSibling.childNodes[0].nodeValue;
el.parentNode.removeChild(el.nextSibling);
el.title=ttext;
}
function tooltip() {
var imgs=document.getElementsByTagName('img');
for (i=0; i<imgs.length; i++) {
imgs[i].onmouseover=function() {showTT(this);}
imgs[i].onmouseout=function() {hideTT(this);}
}
}
window.onload=tooltip;
La ventaja de esta función es que no hace uso de ninguna librería y nos permite personalizar el aspecto del texto en el tooltip haciendo el uso de la clase 'tt' que le asigna al tooltip. Por ejemplo:
.tt {
position:absolute;
border:1px solid gray;
width:300px;
margin:1em;
padding:3px;
background:#fff;
}
