Position <div> near <map> <area>

Question

I have HTML <map> tag with let's say 3 area's. On click event on area 1,2 or 3 I want to display a <div class="pop-content"> with different content for each <area> .

At the moment my <div class="pop-content"> is floating to the top like on this picture.

What I want is to display my <div class="pop-content"> next to each <area> like on this image.

So far my CSS

.pop-content{
  width: 100px;
  height : 120px;
  background-color: gray;
  position: relative;
}

Question is how to CSS <div class="pop-content"> to achieve positions like on 2 image?

I striped my example from my project and reproduced it in this JsFiddle

Answer 1

JSFIddle

Solution:

img {
    position: absolute;
}

.pop-content {
  width: 50px;
  height: 20px;
  padding: 5px;
  background: red;
  position: absolute;
  z-index: 100;
  top: 69px;
  left: 101px;
}

NOTE: But for each planet( <area> ) introduce new class like pop-content1 , pop-content2 and so on that has different positions.