JSFiddle - React, Tailwind, and code Playground

HTML

<div style="min-height:600px;border:1px solid black;">
<div class="clickme">Click this text</div>
<div id="popup">text</div>
<div class="clickme" style="margin-top:280px;">Popup should open top side, if there is no proper space at the bottom of window.</div>
</div>

CSS

.clickme, #popup {
    height: 100px;
    width: 300px;
    border: 1px solid #000;
}
#popup {
    position: absolute;
    display: none;
    z-index: 100;
    background-color: green;
}

JavaScript

$(document).ready( function() {
    $('.clickme').on('click', function(e) { 
           $('#popup').offset({ top: e.pageY, left:  e.pageX}).fadeIn(); 
    });
});