popup positioning

[IceDragon]

i wanna know how to set the position of popup to show exactly below the hovered element. can anyone help?

 

<script type="text/javascript">
function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");

// Set position of hover-over popup
hp.style.top = hoveritem.offsetTop + 18 + 'px';
hp.style.left = hoveritem.offsetLeft + 20 + 'px';

// Set popup to visible
hp.style.visibility = "Visible";
}

function HidePopup()
{
hp = document.getElementById("hoverpopup");
hp.style.visibility = "Hidden";
}
</script>

 

// Set position of hover-over popup

hp.style.top = hoveritem.offsetTop + 18 + 'px';

hp.style.left = hoveritem.offsetLeft + 20 + 'px';

 

i know that this is the part when u set the position, and i wouldnt come asking here if i had only one popup on the page which needs positioning..

but theres more popups and i want each popup to show in different position.

 

is there any code which sets popup to show exactly below the hovered element?