JSFiddle - React, Tailwind, and code Playground

HTML

<div id="previewPopup"> PREVIEW</div>
<table id="elementsTable">
<tr><td><a href="#" class="elementClicked">element 1</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 2</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 3</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 4</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 5</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 6</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 7</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 8</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 9</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 10</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 11</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 12</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 13</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 14</a></td></tr>
</table>

CSS

#previewPopup  {display: none; height: 200px; width: 100px; left: 100px; position: absolute ; background-color: red;}
#elementsTable tr { height: 50px; }

JavaScript

jQuery.fn.setTopAtClickedElement = function (element) {
    
    if (element.offset().top + this.height() > jQuery(document).height())
    {
      this.css('top', jQuery(document).height() - this.height() + 'px');
    } else {
      this.css('top', element.offset().top + 'px');
    }
};

jQuery('a.elementClicked').live('click',function(){
      jQuery("#previewPopup").setTopAtClickedElement(jQuery(this));
      jQuery('#previewPopup').css('display', 'block');
  });