JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div style="position:relative">
    <img id="sorc" src="http://dev.boutiquevalmont.com/media/wysiwyg/valmont/arts/thb3.jpg" />
    <div id="test" class="cclass" style="border:solid">name:blahblah
        <br />name:blahblah
        <br />name:blahblah
        <br />
    </div>
</div>

CSS

.cclass {
    position:absolute;
    background-color:orange;
    height:125px;
    width:175px;
    top:0px;
    left:0px;
    display:none;
}

JavaScript

$('#sorc').on('mousemove mouseleave',function (e) {


     if (e.type == 'mouseleave'){
     $('div#test').css('display', 'none');

     }                

     else {

     $('div#test').css({

           'display': 'block',
           'top': e.pageY,
           'left': e.pageX

           });
         }
});