JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="target"></div>
<div class="target"></div>
<div class="tooltip"></div>

CSS

.target {
  width: 200px;
  height: 200px;
  border: 1px solid #e1e1e1;
  margin: 20px;
}

.tooltip {
  display: none;
  position: absolute;
  z-index: 9999;
  top: -9999px;
  left: -9999px;
  width: 110px;
  height: 110px;
  background: #c1c1c1;
  
}

JavaScript

var x, y;
var target = $('.target');
var tooltip = $('.tooltip');

target.on( "mousemove", function( e ) {

  x = e.pageX,
  y = e.pageY;

});

target.on("mouseenter mouseleave", function( e ) {

	var hover = e.type === "mouseenter";
  var visibility = hover ? "fadeIn" : "fadeOut"; 
  tooltip.stop()[ visibility ]( 70 );

	updateTooltipPos( hover);

});


function updateTooltipPos( hover ) {

  if ( hover ) {
    var updatePos = setInterval( function(){
      tooltip.css({
        left: x,
        top: y + 30,
      });
    }, 15);
  }
  else {
    clearInterval( updatePos );
  }
  
}