JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tooltipSource" style="font-size:50px" data-info="0" data-info2="TEST">CLICK ME 1</div><br />
<div class="tooltipSource" style="font-size:50px" data-info="1" data-info2="TEST">CLICK ME 2</div><br />
<div class="tooltipSource" style="font-size:50px" data-info="2" data-info2="TEST">CLICK ME 3</div><br />

CSS

.tooltip {
	display:none;
	position:absolute;
	border:1px solid #333;
	background-color:#161616;
	border-radius:5px;
	padding:10px;
	color:#fff;
	font-size:12px Arial;
	z-index:99;
}

JavaScript

$(document).ready( function() {
	// Tooltip
	$('.tooltipSource').hover(function(){
			$('body').append('<div class="tooltip"><span>'+$(this).attr('data-info')+'</span><span>'+$(this).attr('data-info2')+'</span></div>');
			$('.tooltip').fadeIn();
        
        if ( $(this).attr('data-info') == 0 ) {
            $('span:first').css('display','none')
        }
	}, function() {
			// Hover out code
			$('.tooltip').remove();
	
	}).mousemove(function(e) {
			var mousex = e.pageX + 20; //Get X coordinates
			var mousey = e.pageY + 10; //Get Y coordinates
			$('.tooltip')
			.css({ top: mousey, left: mousex })
	});
});