javascript - what is the best way to show the pop-up on click of an image? -

here have jsfiddle

you can see there 3 images of players want whenever click on image should show pop-up below players.

player can in position not in grid

so question best way perform this.

i have in wast like..

-- whether onclick of image should change position of position of popup image span tag's text.

-- should provide popup every player , hide , show them

or else can suggest.it me lot.

  
  
#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;          margin-left:50px;    }
  
       <div id='player-back'>          <img src='http://s6.postimg.org/su0e7812l/player1.png' id='p1'/>          <img src='http://s6.postimg.org/afpv38orx/player2.png' id='p2'/>          <img src='http://s6.postimg.org/h7ga63drh/player3.png' id='p3'/>              <div id='player-popup'>                  <span>player1</span>              </div>      </div>       
  
 
 
  
<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> 
  
script:
  
$("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();  }); 
  
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; } 
  
demo: https://jsfiddle.net/astm1o3p/21/
  
here make chqnges in css popup set 
  
position:absolute;