JSFiddle - React, Tailwind, and code Playground

HTML

<div id="my-element"></div>

CSS

div {
    width  : 100px;
    height : 100px;
    background : gold;
}

JavaScript

$('#my-element').on('mouseleave', function (event) {
    if (event.offsetX > 50 && event.offsetY > 50) {
        alert('bottom-right');
    } else if (event.offsetX > 50 && event.offsetY <= 50) {
        alert('top-right');
    } else if (event.offsetX <= 50 && event.offsetY <= 50) {
        alert('top-left');
    } else {
        alert('bottom-left');
    }
});