JSFiddle - React, Tailwind, and code Playground

by Andy keh

HTML

<div class="box">
    <div class="info"></div>
</div>

CSS

.box {
     width:800px;
     height:600px;
     background:#EEE;
     margin:0 auto;
     position:relative;
     cursor:crosshair
 }
 .info {
     background:#333;
     color:#FFF;
     visibility:hidden
 }
 .info p {
     padding:10px;
 }

JavaScript

$('.box').mousemove(function (a) {
    var b = $(this),
        X = 0,
        pH = '',
        pW = $(window).width(),
        bX = $('.box').offset().left,
        bY = $('.box').offset().top,
        bW = b.width(),
        bH = b.height(),
        mX = a.pageX,
        mY = a.pageY,
        mTx = mX - bX,
        mTy = mY - bY,
        info = $('.info');
    info.css({
        'position': 'absolute',
            'visibility': 'visible'
    });
    var infoW = info.width();
    var infoH = info.height();
    if (mTx <= infoW) {
        info.css({
            'left': bW - infoW + 'px',
                'right': 'auto'
        })

    }
    if (mTx >= bW - infoW) {
        info.css({
            'left': '0px',
                'right': 'auto'
        })
    }
    $('.info').html('<p>MX:' + mTx + '</p><p>MY:' + mTy + '</p><p>infoW:' + infoW + '</p><p>BOXW:' + bW + '</p><p>BOXH:' + bH + '</p>')

})