how to fix different behavior between pressing enter and click in javascript?

I am working on a page with image maps. The javascript has a function openBubble that opens a popup box. When user clicks on the image map it opens the popup correctly (using the coordinates X and Y provided in the script). But when I tab to the image map and hit enter, the popup box opens on left side top of the page. I want the popup box to open the same way it opens when user clicks on the image map. Please see my code below -

https://jsfiddle.net/xkgshcyd/

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

 $(function() {
    $('.map').maphilight();
  });
var myData = {
    "left-eye": {
        "title": "",
        "image":"",
        "description": "Lorem ipsum A dolor sin amet. ."
    },
    "mouth": {
        "title": "",
       
        "description": "Lorem ipsum B dolor sin amet. Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.vLorem ipsum B dolor sin amet.vLorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.</p>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.style.top = (event.clientY - 20) + "px";                        
  bubble.style.left = (event.clientX - 200) + "px";                        
  bubble.className = 'shown';
}





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

<!-- language: lang-css -->

#myWrapper{ position: relative; font-family: Arial, Helvetica, sans-serif; }
#myImage{ display: block; }
#myBubble{  background: #fff; border: 1px solid #aaa; padding: .5rem 1rem; display: none; top: 1.5rem; left: 1.5rem; width: 40%;  }
#myBubble.shown{position: fixed; display: block;cursor: pointer;font-size: 0.8rem;
    margin-top: 0.2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); width:20%; }
    #myBubble.shown:before{
    content: "";
    position: absolute;
    top: 20px;
    left:-30px;
    z-index: 1;
    border: solid 15px transparent;
    border-right-color: #FFF;
    
}
#myBubble img{ display: block; width: 100%;
}
#myBubbleCloseButton{ position: absolute; top: 0; right: 0; padding: .5rem;  line-height: 1; cursor: pointer; color: #1A8782; }
#myBubbleCloseButton:hover{  color: #1A8782;  }

<!-- language: lang-html -->

<script src="https://cdn.rawgit.com/davidjbradshaw/image-map-resizer/master/js/imageMapResizer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js"></script>

<div id="myWrapper">

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


 <map name="myMap" id="myMap">
  <area id="left-eye"  coords="118,36,148,80" shape="rect" href="javascript:void(0);">
  <area id="mouth"  coords="121,84,198,118" shape="rect">
</map>

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

<!-- end snippet -->

A conceptually simple way is to copy the coordinates of the map into the myData object and use those instead of clientX and clientY. This has the disadvantage that you need to account for the position of the parent image, therefore you need to store the id of the image to be able to retrieve the coordinates. A bigger disadvantage however is code duplication which may lead to synchronization problems, i.e., if you change the coordinates in the map, or the id of the parent image, then you also need to change them in the myData object.

The advantage is that the handling for a click event is now the same as for a tab+enter event.

Relevant code fragments:

Data object

var myData = {
    "left-eye": {
        "title": "",
        "image":"",
        "topleft": [118,36],
        "parentimg": "myImage",
        "description": "Lorem ipsum A dolor sin amet. .",
    },
    "mouth": {
        "title": "",
        "topleft": [121,84],
        "parentimg": "myImage",       
        "description": "Lorem ipsum B dolor sin amet. Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.vLorem ipsum B dolor sin amet.vLorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.</p>Lorem ipsum B dolor sin amet."
    },
   
};

Click/tab+enter handler

function openBubble() {
  var content = myData[this.id];
  bubbleContent.innerHTML = '<h3>' + content.title + '</h3>'
                          + '<img src="' + content.image + '" alt="" />'
                          + '<p>' + content.description + '</p>';
  parent_box = document.getElementById(content.parentimg).getBoundingClientRect();
  bubble.style.top = (content.topleft[1] + parent_box.top - 20) + "px";                        
  bubble.style.left = (content.topleft[0] + parent_box.left + 20) + "px";                        
  bubble.className = 'shown';
}

JSFiddle: https://jsfiddle.net/1u6n5rvw/