Javascript-форум - Подскажите ка вычислить координаты мыши над конкретным элементом div?

В моем примере для <div class="tooltip"> реализована всплывающая подсказка.
С помощью javascript меняется положение подсказки так что бы она следовала за курсором
Но при перемещении курсора подсказка может вылазить за края экрана. Как решение - менять ширину подсказки.
Но мне нужно вычислить положение курсора над элементом <div id="main">.
!Важно - не окна браузера, а именно <div id="main">

Подскажите кто знает - как это сделать в обработчике mousemove для <div class="tooltip">?
Возможно ли это?

<style>
body{
	white-space: nowrap;
}

div.tooltip{
	position: relative;
	padding: 0px;
	margin: 0px;
	border: 1px solid green;
	width: 150px;
	height: 150px;
	background-color: yellow;
}
div.tooltip span.hint{
	margin-left: -999em;
	opacity: 0;
	position: absolute;
}
div.tooltip:hover span.hint{
	margin-left: 0em;
	opacity: 1;
	border-radius: 5px 5px; 
	box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
	font-family: arial; 
	font-size: medium;
	position: absolute;
	left: 20; top: 20;  
	z-index: 3;
	padding-left: 0.5em;
	width: 350px;
	background: rgba(255,255,170,0.7); 
	border: 1px solid #FFAD33; 
}
</style>
<div id="view" style="background-color: aqua; width: 100%; height: 100px;">

</div><br><br><br>

<div style="width: 20%; height: 300px; display: inline-block; background-color: orange; vertical-align: top;">1</div>

<div id="main" style="width: 80%; height: 300px;  display: inline-block; vertical-align: top; border: 2px solid black;">
<table style="margin: auto; border-collapse: separate; border-spacing: 40px 0px;">
<tr>
<td><div class="tooltip"><span class="hint">tra ta ta ta ta ta ta ta ta ta ta ta ta ta ta ta ta ta ta</span></div></td>
<td><div class="tooltip"><span class="hint">tra ta ta ta ta ta ta ta ta ta ta ta ta ta ta ta ta ta ta</span></div></td>
<td><div class="tooltip"><span class="hint">tra ta ta ta ta ta ta ta ta ta ta ta ta ta ta ta ta ta ta</span></div></td>
<td><div class="tooltip"><span class="hint">tra ta ta ta ta ta ta ta ta ta ta ta ta ta ta ta ta ta ta</span></div></td>
</tr>
</table>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
	var tooltips = document.getElementsByClassName("tooltip");
	for(i=0; i<tooltips.length; i++){
		tooltips[i].addEventListener("mousemove", function(event){
			$(this).children("span").css({"left":event.offsetX+17, "top":event.offsetY + 17});
			
			var buf="";
			buf = buf+ "div.tooltip.left:"+ event.offsetX+"||"+ "div.tooltip.top:"+event.offsetY+"<br>";
			
			buf= buf+"div.main.width:"+document.getElementById("main").clientWidth+"<br>";
			
			$("#view").html(buf);
			
		});
	}
</script>