JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" post="101" class="triggerLoad" id="section101">See all comments</a>

<div
id="commentsection101">
    <div id="comment1">comment 1 <a href="#" class='trigger' id='c1'>pop-up</a> 
    </div>
    <div class='pop-up' id='pop-upc1'>hidden 1
        <br>Jim Robinson
        <br>Syncro
        <br>
    </div>
    <div id="comment2">comment 2</div>
    </div>

CSS

div.hidden {
    display: none;
}
/* HOVER STYLES */
 div.pop-up {
    display: none;
    text-align: left;
    position: absolute;
    margin-top: -100px;
    width: 120px;
    padding: 8px 13px;
    background: #eeeeee;
    color: #000000;
    border: 1px solid #1a1a1a;
    font-size: 96%;
}

JavaScript

$(document).on("mouseenter", 'a.trigger', 'hover', function () {
        var currentID = $(this).attr('id');
        var targetID = 'div#pop-up' + currentID;
        $(targetID).show();
    });
    $(document).on("mouseleave", 'a.trigger', function () {
        var currentID = $(this).attr('id');
        var targetID = 'div#pop-up' + currentID;
        $(targetID).hide();
    });

$(document).on("mousemove", 'a.trigger', 'hover', function (e) {
        var moveLeft = 10;
        var moveDown = 50;
        var currentID = $(this).attr('id');
        var targetID = 'div#pop-up' + currentID;
        $(targetID).css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
    });