Currently, I am having trouble triggering an event when a user stops moving their mouse over a div element. The current event is set up to show and follow another element along with the mouse movement, but I want it to only display when the mouse stops moving within the div.
HTML
<div class="tooltip"><p></p></div>
<div class="holder" id="1"></div>
<div class="holder" id="2"></div>
CSS
.holder{
display: block;
float: left;
margin-bottom: 0.25%;
width: 100%;
height: 200px;
cursor: pointer;
border-top: 1px solid rgb(100, 100, 0);
border-bottom: 1px solid rgb(100, 100, 0);
}
.tooltip{
position: absolute;
display: none;
width: 150px;
background-color: white;
z-index: 5;
}
JS
var holder = document.getElementsByClassName("holder");
var tooltip = document.getElementsByClassName("tooltip")[0];
for(var i = 0; i < holder.length; i++){
var moving;
holder[i].onmouseover = function(ev){
moving = false
tooltip.style.display = "block";
tooltip.style.top = ev.clientY;
tooltip.style.left = ev.clientX;
}
holder[i].onmouseout = function(ev){
moving = false
tooltip.style.display = "none";
tooltip.style.top = ev.clientY;
tooltip.style.left = ev.clientX;
}
holder[i].onmousemove = function(ev){
moving = true;
}
if(moving){
tooltip.style.display = "none";
tooltip.style.top = ev.clientY;
tooltip.style.left = ev.clientX;
}
}