title: Is it possible to trigger an event when the mouse stops moving?
body: <p>I have an event that is triggered when a user has their mouse over a div element and while they're moving the mouse over the element.  However, I can't seem to find a way to trigger an event when the mouse stops moving.  For example, the event I'm working on checks if the user has the mouse over a div, if it is, then another element is shown and follows the mouse around.  When the user leaves the div, the shown element is hidden.  The way it works now is, I have the shown element showing and following the mouse around on the moused-over div, but it's not exactly what I want.  I'd like to have it not show when the mouse is moving, but show when the mouse has stopped moving.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="tooltip"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;
  &lt;div class="holder" id="1"&gt;&lt;/div&gt;
  &lt;div class="holder" id="2"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var holder = document.getElementsByClassName("holder");
  var tooltip = document.getElementsByClassName("tooltip")[0];
  for(var i = 0; i &lt; 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;
      }
  }
  </code></pre>