JSFiddle - React, Tailwind, and code Playground

HTML

<div id="target"></div>
<div id="console"></div>

CSS

#console{
    max-height: 200px;
    overflow-y: auto;
}
p{margin:0;}
#target{
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: orange;
}

JavaScript

$('#target').on('mouseenter', function(e){
    var dir = determineDirection($(this), {x: e.pageX, y: e.pageY});
    $('#console').append('<p>'+dir+'</p>');
    scrollToBottom();
});


function determineDirection($el, pos){
        var w = $el.width(),
            h = $el.height(),
            x = (pos.x - $el.offset().left - (w/2)) * (w > h ? (h/w) : 1),
            y = (pos.y - $el.offset().top  - (h/2)) * (h > w ? (w/h) : 1);

        return Math.round((((Math.atan2(y,x) * (180/Math.PI)) + 180)) / 90 + 3) % 4;
    }

function scrollToBottom(){
  var $console    = $('#console'),
      height = $console[0].scrollHeight;
  $console.scrollTop(height);
}