Исходный код этого примера:

#tooltip {

background:#FFFFFF;
border:2px solid #ADC1CE;

font:1.7em Verdana,Geneva,Arial,Helvetica,sans-serif;
margin:0px;
-moz-border-radius:8px;
padding:3px 5px;
position:absolute;
visibility:hidden
}

Красивая глобальная кроссбраузерная вплывающая подсказка на ALT

// отключение вывода сообщений об ошибках
window.onerror = null;
var tooltip_attr_name = «tooltip»; // наименование создаваемого tooltip’ого атрибута
// функция вызывается при загрузке страницы
window.onload = function(e){
// если браузер поддерживает DOM и создание элементов, то мы запускаем механизм создания tooltip’а
if (document.createElement) tooltip.d();
}

// объект tooltip
tooltip = {
// создание слоя, в котором будет находится текст подсказки (точнее, TextNode, содержащий текст)
t: document.createElement(«DIV»),
// таймер
c: null,
// флаг, указывающий показана ли сейчас на экране подсказка
g: false,
// обработчик события onMouseMove
m: function(e){
// если подсказка была вызвана на экран
if (tooltip.g){
// важно! определяем канву, учитывая режим совместимости в IE 6
oCanvas = document.getElementsByTagName(
(document.compatMode && document.compatMode == «CSS1Compat») ? «HTML» : «BODY»
)[0];
// x-координата, где произошёл вызов подсказки
x = window.event ? event.clientX + oCanvas.scrollLeft : e.pageX;
// y-координата, где произошёл вызов подсказки
y = window.event ? event.clientY + oCanvas.scrollTop : e.pageY;
// вывод подсказки на экран (задание координат)
tooltip.a(x, y);
}
},
d: function(){
// установка атрибута id со значением tooltip (который описан у нас в CSS)
tooltip.t.setAttribute(«id», «tooltip»);
// добавление к элементу body дочернего объекта tooltip
document.body.appendChild(tooltip.t);
/* далее мы считываем в массив все элементы, затем у тех, которые имеют HTML атрибуты title и alt задаём новый атрибут tooltip_attr_name (текст подсказки); мы также задаём обработчики событий onMouseOver и onMouseOut */
a = (document.all) ? document.all : document.getElementsByTagName(«*»);
aLength = a.length;
for (var i = 0; i < aLength; i++){
if (a[i].getAttribute(«title»)){
a[i].setAttribute(tooltip_attr_name, a[i].getAttribute(«title»));
a[i].removeAttribute(«title»);
if (a[i].getAttribute(«alt») && a[i].complete) a[i].removeAttribute(«alt»);
tooltip.l(a[i], «mouseover», tooltip.s);
tooltip.l(a[i], «mouseout», tooltip.h);
}else
if (a[i].getAttribute(«alt») && a[i].complete){
a[i].setAttribute(tooltip_attr_name, a[i].getAttribute(«alt»));
a[i].removeAttribute(«alt»);
tooltip.l(a[i], «mouseover», tooltip.s);
tooltip.l(a[i], «mouseout», tooltip.h);
}
}
// задаём для документа обработчик события onMouseMove
document.onmousemove = tooltip.m;
// прячем подсказку при скроллинге
window.onscroll = tooltip.h;
},
// подготавливаем подсказку для вывода на экран

s: function(e){
// получаем объект, у которого будет показана подсказка
d = (window.event) ? window.event.srcElement : e.currentTarget;
// нелишняя проверка на наличее свойства tooltip_attr_name
if (!d.getAttribute(tooltip_attr_name)) return;
// удаляем у слоя с подсказкой первый дочерний объект (TextNode с текстом), если он вдуг не удалился раньше
if (tooltip.t.firstChild) tooltip.t.removeChild(tooltip.t.firstChild);
/* добавляем к элементу t (слой) новый TextNode, содержащий текст, взятый из свойства tooltip_attr_name активного объекта */
tooltip.t.appendChild(document.createTextNode(d.getAttribute(tooltip_attr_name)));
// показываем подсказку с задержкой в 0,5 секунды
tooltip.c = setTimeout(«tooltip.t.style.visibility = ‘visible’;», 500);
// устанавливаем флаг, сигнализирующий о том, что подсказка у нас на экране
tooltip.g = true;
},
// удаляем подсказку с экрана

h: function(e){
// прячем подсказку
tooltip.t.style.visibility = «hidden»;
// удаляем у слоя с подсказкой первый дочерний объект (TextNode с текстом)
if (tooltip.t.firstChild) tooltip.t.removeChild(tooltip.t.firstChild);
// убираем задержку
clearTimeout(tooltip.c);
// устанавливаем флаг
tooltip.g = false;
// с глаз долой:
tooltip.a(-99, -99);
},

// делаем так, чтобы элементы с title и alt нужным образом реагировали на события onMouseOver и onMouseOut
l: function(o, e, a){
if (o.addEventListener) o.addEventListener(e, a, false); // было true (не работает в Opera 7)
else if (o.attachEvent) o.attachEvent(«on» + e, a);
else return null;
},

// устанавливаем координаты всплывающей подсказки
a: function(x, y){
// важно! определяем канву, учитывая режим совместимости в IE 6
oCanvas = document.getElementsByTagName(
(document.compatMode && document.compatMode == «CSS1Compat») ? «HTML» : «BODY»
)[0];
w_width = window.event ? oCanvas.clientWidth : window.innerWidth;
t_width = window.event ? tooltip.t.clientWidth : tooltip.t.innerWidth;
t_extra_width = 7; // padding + borderWidth;

// y-координата
tooltip.t.style.top = y + 8 + «px»;
// x-координата
tooltip.t.style.left = x + 8 + «px»;

// bugfix! делаем так, чтобы подсказка не вылазила за границы окна
while (x + t_width + t_extra_width > w_width){
-x;
tooltip.t.style.left = x + «px»;
t_width = window.event ? tooltip.t.clientWidth : tooltip.t.innerWidth;
}
}
}