This way
<br />
<br />
<br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type = "text/javascript">
$("[id*=lnk]").live("mouseover", function () {
var p = GetScreenCordinates(this);
var div = $("#" + $(this)[0].id.replace("lnk", "dv"));
div.css({ left: p.x + 10, top: p.y - 40, position: "absolute" });
div.show();
});
$("[id*=lnk]").live("mouseout", function () {
var div = $("#" + $(this)[0].id.replace("lnk", "dv"));
div.hide();
});
function GetScreenCordinates(obj) {
var p = {};
p.x = obj.offsetLeft;
p.y = obj.offsetTop;
while (obj.offsetParent) {
p.x = p.x + obj.offsetParent.offsetLeft;
p.y = p.y + obj.offsetParent.offsetTop;
if (obj == document.getElementsByTagName("body")[0]) {
break;
}
else {
obj = obj.offsetParent;
}
}
return p;
}
</script>
<a id = "lnk1" href = "javascript:;">Link 1</a>
<div id = "dv1" style = "display:none;background-color:Red;color:White;height:40px;width:100px">DIV 1</div>
Demo