JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr>
    <td><a class="tooltip" href="#">123</a>
        <div class="pop-up is-hidden">
            <p>Type:<span>Code</span></p>
            <p>Number:<span>123</span></p>
            <p>Status:<span>Valid</span></p>
            <p>Sold In:<span>August</span></p>
            <p>Uploaded:<span>20/09/2012 10:34</span></p>
        </div>
    </td>
    <td>Code</td>
    <td>Valid</td>
    <td>Device is active</td>
</tr>
<tr>
    <td><a class="tooltip" href="#">123</a>
        <div class="pop-up is-hidden">
            <p>Type:<span>Code</span></p>
            <p>Number:<span>123</span></p>
            <p>Status:<span>Valid</span></p>
            <p>Sold In:<span>August</span></p>
            <p>Uploaded:<span>20/09/2012 10:34</span></p>
        </div>
    </td>
    <td>Code</td>
    <td>Valid</td>
    <td>Device is active</td>
</tr>
</table>

CSS

.is-hidden {display: none; position: absolute}
table td{padding: 10px; width: 200px;}

JavaScript

$("a.tooltip").mouseenter(function(e) {
    tooltip = $(this).parent().find(".is-hidden");
    tooltip
        .css("top", "500px")
        .css("z-index","200002")
        .css("left", "500px");
    
    tooltip.show();
}).mouseleave(function(e) {
    tooltip = $(this).parent().find(".is-hidden");
    tooltip.hide();
});