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.