JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://s6.postimg.org/su0e7812l/player1.png"></script>
<script src="http://s6.postimg.org/afpv38orx/player2.png"></script>
<script src="http://s6.postimg.org/h7ga63drh/player3.png"></script>
<script src="http://s6.postimg.org/r618skn71/player_popup.png"></script>
<div id='player-back'>
    <img src='http://s6.postimg.org/su0e7812l/player1.png' data-playerid="1" id='p1'/>
    <img src='http://s6.postimg.org/afpv38orx/player2.png' data-playerid="2" id='p2'/>
    <img src='http://s6.postimg.org/h7ga63drh/player3.png' data-playerid="3" id='p3'/>
        <div id='player-popup' style="display:none">
            <span>Player1</span>
        </div>
</div>

CSS

#player-back{
    height:250px; 
    background:#0F0;
}
#p1{
    margin-top:50px;
    margin-left:80px;
}
#p2{
    margin-left:150px;
}
#p3{
    margin-left:200px;
}
#player-popup{
    background:orange;
    height:27px;
    width:85px;
    border-radius:10px;
    text-align:center;
    position:absolute;
}

JavaScript

$("img").click(function(){
    var top = $(this).offset().top + $(this).width() + 2;
    var left = $(this).offset().left - $(this).height() / 2;  
    $("#player-popup span").text("Player "+$(this).data("playerid")); 
    $("#player-popup").css({ top: top, left: left }).show();

});