попробовал на jquery сделать
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>
<script>
$(function(){
$('div').mouseenter(function (e) {
var jEl = $(this),
w = jEl.outerWidth(),
h = jEl.outerHeight(),
off = jEl.offset(),
x = e.pageX - off.left,
y = e.pageY - off.top,
xShift, // сдвиг от правой или левой границы
yShift, // сдвиг от верхней или нижней границы
xText,
yText,
itogText;
if (x / w > .5) {
xShift = w - x;
xText = 'справа';
} else {
xShift = x;
xText = 'слева';
}
if (y / h > .5) {
yShift = h - y;
yText = 'снизу';
} else {
yShift = y;
yText = 'сверху';
}
itogText = (xShift < yShift) ? xText : yText;
jEl.text(itogText);
});
});
</script>
</head>
<body>
<div style="width: 100px; height: 100px; padding: 20px; margin: 20px; background: red;"></div>
</body>
</html>
