JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="profile">
        <div class="wrapper">
            <div class="pop-up">
                <div class="pop-up_bold">i</div>
                nt.<br />
                Email :<a href=mailto:[email protected]>[email protected]</a><br />
                Website :<a href=http://www.nt.com>www.nt.com</a>
            </div>
            <img class="trigger" src="images/uu.jpg" alt="Profile Image" />
        </div>
    </div>
    
    <div class="profile">
        <div class="wrapper">
            <div class="pop-up">
                <div class="pop-up_bold">Ii</div>
                nt.<br />
                Email :<a href=mailto:[email protected]>[email protected]</a><br />
                Website :<a href=http://www.nt.com>www.nt.com</a>
            </div>
            <img class="trigger" src="images/uu.jpg" alt="Profile Image" />
        </div>
    </div>
    
    <div class="profile">
        <div class="wrapper">
            <div class="pop-up">
                <div class="pop-up_bold">IR</div>
                nt.<br />
                Email :<a href=mailto:[email protected]>[email protected]</a> <br />
                Website :<a href=http://www.nt.com>www.nt.com</a>
            </div>
            <img class="trigger" src="images/uu.jpg" alt="Profile Image" />
        </div>
    </div>
</div>

CSS

div#container {margin-left:100px; top: 200px; position: absolute;}

div.profile {
  width: 40px;
  float: left;
  top:150px;
  left:-100px;
  margin: 10px 5px 10px 5px;
}

div.pop-up {
    display: none;
    position: absolute;
    z-index:9999;
    margin-top: -105px;
    margin-left: -100px;
    width: 300px;
    height: 100px;
    padding: 0px 10px;
    overflow:hidden;
    background:#222222; 
    color: #ffffff;
    border: 1px solid #1a1a1a;
    font-size: 90%;
}

.pop-up a {margin: 0 0 0 8px; }
.pop-up_bold {margin: 7px 0 0 0; color: #f6f907; font-size: 16px; font-weight: bold;}
.trigger {width: 40px; height: 26px; display: block; margin: 10px; position: relative; cursor: pointer;}

JavaScript

$(document).ready(function() {
    $(".pop-up").hide();
    
    $(".wrapper").on({
        mouseenter : function (e) {
            $(".pop-up", this).stop().fadeIn('fast');
        },
        mouseleave: function () {
            $(".pop-up", this).stop().fadeOut('fast');  
        }
    });
});