How to display popup box next to image in a image map?

Question

I am working on an image map with a popup textbox. Everything works fine. However, I am not sure how to display the textbox next to the image when I click on a hotspot. Right now, the popup box displays on top of the hotspot.

Here is the link to my code - https://jsfiddle.net/a3gtf8rw/

var myData = {
    "left-eye": {
        "title": "This point A",
        
        "description": "Lorem ipsum A dolor sin amet."
    },
    "mouth": {
        "title": "This point B",
       
        "description": "Lorem ipsum B dolor sin amet."
    },
   
};
var areas         = document.getElementsByTagName('area'),
    bubble        = document.getElementById('myBubble'),
    bubbleContent = document.getElementById('myBubbleContent'),
    bubbleClose   = document.getElementById('myBubbleCloseButton');

// On click of an area, open popup
for(var i=0, l=areas.length; i<l; i++) {
  areas[i].addEventListener('click', openBubble, false);
}

// On click of close button, close popup
bubbleClose.addEventListener('click', closeBubble, false);

function openBubble() {
  var content = myData[this.id];
  bubbleContent.innerHTML = '<h3>' + content.title + '</h3>'
                          + '<img src="' + content.image + '" alt="" />'
                          + '<p>' + content.description + '</p>';
  bubble.className = 'shown';
}

function closeBubble() {
  bubble.className = '';
}

// Make the image map responsive
imageMapResize();

#myWrapper{ position: relative; font-family: Arial, Helvetica, sans-serif; }
#myImage{ display: block; }
#myBubble{ position: absolute; background: #fff; border: 1px solid #aaa; padding: .5rem 1rem; display: none; top: 1.5rem; left: 1.5rem; width: 15rem; }
#myBubble.shown{ display: block; }
#myBubble img{ display: block; width: 100%; }
#myBubbleCloseButton{ position: absolute; top: 0; right: 0; padding: .5rem; background: #eee; line-height: 1; cursor: pointer; }
#myBubbleCloseButton:hover{ background: #000; color: #fff; }

<script src="https://cdn.rawgit.com/davidjbradshaw/image-map-resizer/master/js/imageMapResizer.js"></script>

<div id="myWrapper">
   <img id="myImage" src="http://tinypic.com/images/goodbye.jpg" usemap="#myMap" alt="" />


 <map name="myMap" id="myMap">
  <area id="left-eye"  coords="118,36,148,80" shape="rect">
  <area id="mouth"  coords="121,84,198,118" shape="rect">
</map>

   <div id="myBubble">
      <div id="myBubbleContent"></div>
      <div id="myBubbleCloseButton">✕</div>
    </div>
</div>

Answer 1

I added a bit of code to read the position of the mouse cursor and use that to position the bubble. The result is:

var myData = {
    "left-eye": {
        "title": "This point A",
        
        "description": "Lorem ipsum A dolor sin amet."
    },
    "mouth": {
        "title": "This point B",
       
        "description": "Lorem ipsum B dolor sin amet."
    },
   
};
var areas         = document.getElementsByTagName('area'),
    bubble        = document.getElementById('myBubble'),
    bubbleContent = document.getElementById('myBubbleContent'),
    bubbleClose   = document.getElementById('myBubbleCloseButton');

// On click of an area, open popup
for(var i=0, l=areas.length; i<l; i++) {
  areas[i].addEventListener('click', openBubble, false);
}

// On click of close button, close popup
bubbleClose.addEventListener('click', closeBubble, false);

function openBubble(event) {
  var content = myData[this.id];
  bubbleContent.innerHTML = '<h3>' + content.title + '</h3>'
                          + '<img src="' + content.image + '" alt="" />'
                          + '<p>' + content.description + '</p>';
  bubble.style.top = (event.clientY + 30) + "px";                        
  bubble.style.left = (event.clientX + 30) + "px";                        
  bubble.className = 'shown';
}

function closeBubble() {
  bubble.className = '';
}

// Make the image map responsive
imageMapResize();

#myWrapper{ position: relative; font-family: Arial, Helvetica, sans-serif; }
#myImage{ display: block; }
#myBubble{ position: absolute; background: #fff; border: 1px solid #aaa; padding: .5rem 1rem; display: none; width: 15rem; }
#myBubble.shown{ display: block; }
#myBubble img{ display: block; width: 100%; }
#myBubbleCloseButton{ position: absolute; top: 0; right: 0; padding: .5rem; background: #eee; line-height: 1; cursor: pointer; }
#myBubbleCloseButton:hover{ background: #000; color: #fff; }

<script src="https://cdn.rawgit.com/davidjbradshaw/image-map-resizer/master/js/imageMapResizer.js"></script>

<div id="myWrapper">
   <img id="myImage" src="http://tinypic.com/images/goodbye.jpg" usemap="#myMap" alt="" />


 <map name="myMap" id="myMap">
  <area id="left-eye"  coords="118,36,148,80" shape="rect">
  <area id="mouth"  coords="121,84,198,118" shape="rect">
</map>

   <div id="myBubble">
      <div id="myBubbleContent"></div>
      <div id="myBubbleCloseButton">✕</div>
    </div>
</div>

Here is the JSFiddle: https://jsfiddle.net/xqo2ge3m/

I am not sure this is what you wanted?