Something like this?
.box {
width:300px;
height:100px;
position: absolute;
top: 30%;
left: 30%;
background-color:yellow;
border:2px solid;
}
<div id="popup">Mouse is on box</div>
<div id="box" class="box"></div>
var box = document.getElementById("box");
var top = box.offsetTop;
var left = box.offsetLeft;
var right = left + box.offsetWidth;
var bottom = top + box.offsetHeight;
var hoverState = false;
var popup = document.getElementById("popup");
popup.hidden = true;
function hoverCheck(evt) {
var x = evt.clientX;
var y = evt.clientY;
if (x >= left && x <= right && y >= top && y <= bottom) {
if (hoverState === false) {
hoverState = true;
console.log("mouseon");
}
} else {
if (hoverState === true) {
hoverState = false;
console.log("mouseoff");
}
}
popup.hidden = !hoverState;
}
document.addEventListener("mousemove", hoverCheck, false);
on jsfiddle