Javascript: Всплывающие подсказки без jQuery

Нынче в свете веяний WEB 2.0 стало модным добавлять на сайты всякие "фишки". Реализуются они, как правило посредством JavaScript библиотек. И попросила моя программерская душа сотворить чего нибудь такого вэбдванольногона JavaScript, но без использования какой либо библиотеки, на чистом, так сказать языке. И вот в процессе моего обучения этому удивительному языку родил я на свет такой скрипт: показывает он подсказки в облачке, при наведении на тот, или иной элемент. Аналог JQuery tooltip или tip - не помню точно.

Скрипт реализован автономным модулем, кроме своего имени не добавляет в глобальную область ни каких других переменных, неплохо сжимается компрессором и судя по тестам sIEve - память через него в IE6 не утечёт.

Инструкция: Нужно просто вызвать функцию подсказки, как конструктор, передав ей следующие параметры:

1. Обязательный. Глобальный контекст или в браузере ссылку на объект window.
2. Обязательный. NodeList элементов ( например getElementsByTagName("DIV") ), или ссылку на элемент, на котором нужно выводить подсказку ( например getElementById("tip-div") ).
3. Необязательный. Объект с настройками стилей вроде того:
   {background : "yellow", border : "solid 1px green"}
4. Необязательный. Объект с настройками смещения облака по оси X и Y типа того:
   { x : 20, y : -20 } - объект должен содержать эти два свойства

Пример использования:

  window.onload = function() {
  // Запускаем подсказки:
  new Tip( window,
            document.getElementsByTagName("a"),
            {
              borderRadius : "10px", 
              background : "yellow", 
              border : "solid 1px green", 
              color : "green", 
              padding : "10px"
            }, {x : 20, y : -20} );
  }

Конечно скрипт подсказки можно усовершенствовать и добавить к облачку "ножку", но мне не хотелось усложнять его, я думаю вы и сами сможете сделать это, если понадобится. Ещё скрипт жёстко ставит обработчики событий mouseover и mouseout - путём присваивания функций соответствующим свойтсвам напрямую. Поэтому всё же остаётся вероятность конфликтов в этом месте, но всё поправимо, как я уже указывал в одном из предыдущих постов можно сделать "композицию" с объектом который описан здесь. В общем кому потребуется/понравится - пользуйтесь наздоровье.

Скрипт подсказок листинг (он не такой уж большой. В нём больше комментариев):

  function Tip(GLOBAL, elements, styles, offset)
  {
      // Страховка необязательных аргументов:
      if (!offset) {
          offset = {x : 50, y : -10}
      }
      if(!styles) {
          styles = {};
      }
      // Объявляем переменные и зависимости
      var DOC = GLOBAL.document,
          length = elements.length,
          tipDiv,
          prop,
          i;	
      // Добавляем html-элемент подсказки:
      function addTip(element,div,textTip)
      {        
        // Позиция дожна быть абсолютной:
        div.style.position = "absolute";		
            // Перегоняем значения из объекта настроек стилей:
            for (prop in styles) {
            if (styles.hasOwnProperty(prop)) {
              div.style[prop] = styles[prop]; 
            }
        }		
        // Добаляем элемент подсказку в дерево DOM
        element.parentNode.appendChild(div);
        // Добавляем текст в div подсказки
        // Здесь сделано именно так, что бы избежать
        // Утечек памяти в IE6
        div.appendChild( textTip );
            
        return div;
      }			
      // Раздаём пирожки (обработчики событий)
      // @parament element - ссылка на html - элемент.
      function addHandlers(element) {	
            // Создаём div для подсказки:
            var div = DOC.createElement("DIV"),
            // Задаём текст для подсказки - берём его из атрибута title 
            textTip = DOC.createTextNode(element.tempTitle);            
            // Обработчик события наведения мыши:
            function mouseOver() {
                tipDiv = addTip(element,div,textTip);
                // Высчитываем положение облачка:            
                tipDiv.style.top = element.offsetTop + offset.y - tipDiv.offsetHeight + "px";
                tipDiv.style.left = element.offsetLeft + offset.x + element.offsetLeft  + "px";   
            }
            // Обработчик события съезда мыши:
            function mouseOut() {
                tipDiv.parentNode.removeChild(tipDiv);
                tipDiv = null;
            }    
        // Назначаем обработчики событий:
        element.onmouseover = mouseOver;
        element.onmouseout = mouseOut;
      }    
      // Если elements - это NodeList
      if (elements.item) {
        // Проходимся по заданным элементам:
        for (i = 0; i < length; i += 1) {
          
            elements[i].tempTitle = elements[i].title;
            elements[i].title = "";             
            addHandlers(elements[i]);
              
        }
      // Иначе работаем дальше с одним элементом:
      } else {
          elements.tempTitle = elements.title;
          elements.title = "";
          addHandlers(elements);
      }
      // Обнуляем зависимость:
      DOC = null;
  };