JSFiddle - React, Tailwind, and code Playground

by mubarakpasha

HTML

<div id="myToolTip"></div>

<div class="hoverAble" titlemm="I am good at code <img src='https://www.udemy.com/blog/wp-content/uploads/2014/05/shutterstock_80330794-300x200.jpg' />">hi catch me</div>

CSS

#myToolTip { display: none;position:absolute; }

JavaScript

function mouseX(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
   return evt.clientX + (document.documentElement.scrollLeft ?
   document.documentElement.scrollLeft :
   document.body.scrollLeft);
else return null;
}

function mouseY(evt) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
   return evt.clientY + (document.documentElement.scrollTop ?
   document.documentElement.scrollTop :
   document.body.scrollTop);
else return null;
}


$('.hoverAble').hover(function(e){
    	var left = mouseX(e);
    	var top  = mouseY(e);
         var tip  = $(this).attr('titlemm');

        $('#myToolTip').css('top',top);
        
    	$('#myToolTip').html(tip).fadeIn();


    }, function() {

        $('#myToolTip').fadeOut();

    });