JSFiddle - React, Tailwind, and code Playground

by Glenn Marks

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div id="MeHover">
Hover Over Me
</div>
<br/><br/>

CSS

.over{
  display: none;
  position:absolute;
  top:20px;
  left:0;
  right: 0;
  background: green
}

JavaScript

var 
		hov = $("<div class=\"over\">I'm Over You</div>"),
    box = $("<div>Result: WAITING</div>");

$("body").append(hov).append(box);

$("#MeHover").add(hov).mouseenter(function () {
  $("#MeHover").data("keepHover", 1);
  hov.fadeIn();
}).mouseleave(function () {
  $("#MeHover").removeData("keepHover");
  WriteResult();
  CloseHover();
});

function CloseHover(){
  clearTimeout(t);
  var t = setTimeout(function () {
      WriteResult();
    	if ($("#MeHover").data("keepHover") != 1)
        	hov.fadeOut();
  }, 300);
}

function WriteResult(){
  var d = new Date();
  box.html("Result: <b>" + ($("#MeHover").data("keepHover") == 1).toString().toUpperCase() + "</b> (" + ("0"+d.getHours()).substr(-2) + ":" + ("0"+d.getMinutes()).substr(-2) + ":" + ("0"+d.getSeconds()).substr(-2) + " " + ("0"+d.getDate()).substr(-2) + "/" + ("0"+d.getMonth()).substr(-2) + "/"+ d.getFullYear() + ")");
}