JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rune">
    <img src="" alt="" height="100%" />
    <p class="stats">asd</p>
	<div class="toDisplay">
        <p class="toDisplayName">asdas</p>
	    <p class="toDisplayStats">asdasdasdasda</p>
    </div>
</div>

<div class="rune">
    <img src="" alt="" height="100%" />
    <p class="stats">asd</p>
	<div class="toDisplay">
        <p class="toDisplayName">asdas</p>
	    <p class="toDisplayStats">asdasdasdasda</p>
    </div>
</div>

CSS

.rune {
	display: block;
	height: 44px;
	width: 191px;
	background: linear-gradient(#f1ebd5, #e0ce9f);
	border: 1px #987b2d solid;
	border-right: 1px #c6b37f solid;
	position: relative;
	overflow: visible;
}

.stats {
    font-family: "Cabin",sans-serif;
    font-size: 12px;
    font-weight: 200;
    left: 50px;
    position: absolute;
    top: 10px;
}

.toDisplay {
	display: none;
	z-index: 10;
	width: 274px;
	height: 64px;
	background-color: #000;
	border: 2px #695f55 solid;
	border-radius: 4px;
	color: #fff;
	position: absolute;
}

.toDisplayName {
	margin-top: 20px;
	display: block;
	color: #ca0000;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	line-height: 20px;
}

.toDisplayStats {
	display: block;
	color: #fff;
	font-size: 13px;
	font-weight: 400;
	text-align: center;
}

.rune:hover > .toDisplay {
    display: block;
}

JavaScript

$(document).ready(function() {
			var mouseX = 0, mouseY = 0;
			$('.rune').mousemove(function(e){
				var offset = $(this).offset();
			    mouseX = e.pageX - offset.left;
			    mouseY = e.pageY - offset.top;
			    if (mouseX < 0) mouseX = 0;
			    if (mouseY < 0) mouseY = 0;
			});
			var follower = $('.toDisplay');
			var xp = 0, yp = 0;
			var loop = setInterval(function(){
			    xp += mouseX - xp;
			    yp += mouseY - yp;
			    follower.css({left:xp, top:yp});
            }, 30);
})