JSFiddle - React, Tailwind, and code Playground

by Amin Kodaganur

HTML

<body bgcolor="#4679BD">
    <div class="pointer_tooltip"> 
        Click & Drag to draw the area
    </div>
</body>

CSS

.pointer_tooltip{
    width : auto;
    height : auto;
    padding : 10px;
    border-radius : 5px;
    background-color : #fff;
    position: absolute;
}

JavaScript

//$(document).ready(function(e) {

    $(document).mousemove(function( event ) {
        var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";   

        //set the actuall width
        $('.pointer_tooltip').width($('.pointer_tooltip').width());
        var position_top = event.pageY+18;
        var position_left = event.pageX-60;          
        var width=$('body').width()-$('.pointer_tooltip').width();

        //check if left not minus
        if(position_left<0){
          position_left=10;
        }else if(position_left > width){
         position_left=width-10;
        }       


        $('.pointer_tooltip').css('top',position_top+'px');
        $('.pointer_tooltip').css('left',position_left+'px');
    });
//});