Apró trükk tooltip gyártásra prototype.js-sel

Talán nem a legszebb megoldás, de rendkívül rövid és könnyen konfigurálható, kusztomizálható.

A medve:

function get_absolute_pos(obj)
{
   var shiftX = 0;
   var shiftY = 0;
   if (obj!=null)
   {
      if (obj.tagName.toUpperCase()=='DIV')
      {
         if (obj.scrollLeft) shiftX = obj.scrollLeft;
         if (obj.scrollTop) shiftY = obj.scrollTop;
      }

      var ret = { x: obj.offsetLeft - shiftX, y: obj.offsetTop - shiftY };
      if (obj.offsetParent) {
         var tmp = this.get_absolute_pos(obj.offsetParent);
         ret.x += tmp.x;
         ret.y += tmp.y;
      }
   }

   else ret={x:0,y:0};
   return ret;
}

function create_popups(class_name)
{
   $$('.'+class_name).each(
      function(i)
      {
         Event.observe(i,'mouseover',function()
         {
            if (!this.popup)
            {
               pos=get_absolute_pos(this);
               this.popup=document.createElement('DIV');
               this.popup.className='popup';
               this.popup.innerHTML=this.innerHTML;
               this.popup.style.top="-100px";
               this.popup.style.left=(pos.x)+'px';
               this.appendChild(this.popup);
               this.popup.style.top=(pos.y-this.popup.offsetHeight-2)+'px';
            }
            this.appendChild(this.popup);
         });

         Event.observe(i,'mouseout',function()
         {
            this.removeChild(this.popup);
         });
      }
   );
}

és a css osztály:

.popup {
   position:absolute;
   padding:2px;
   color:#000000;
   background-color:#f8f8a0;
   border:1px solid #000000;
}

Hogy miről is van szó?
Először is a $$() függvény kikeresi az összes olyan objektumot, amihez a megadott css osztály tartozik. Aztán minden ilyen objektumhoz beállítok eseménykezelőt az Event.observe()-vel. A ‘mouseover’-re készítek egy div-et, amihez hozzárendelem a popup css osztályt, és belerakom az eredeti elem tartalmát, majd pozícionálom. (Azért rakom ki első körben a látható területen kívülre, hogy le lehessen kérdezni a magasságát, így aztán az appendChild után már könnyen a megfelelő helyre tudom mozgatni.) A ‘mouseout’-ra meg csak egyszerűen eltüntetem.
Ahhoz, hogy picit gyorsabb legyen, figyelem azt is ‘mouseover’-kor, hogy már létrehoztam-e a popup div-et korábban.