Responsive Image Map popup

I want to do a popup hover so when a user hovers over an image area map jquery toggles a popup div to display. That part is works fairly well but I cannot get the coordinates of the div properly, especially after window resized to a tablet or mobile size.

Live Site: https://prodiveinternational.com/international-landing-page/

Plunker: Here is a plunkr: http://plnkr.co/edit/bcZwn0oUnPGUnwvodo32?p=preview

Is there any way to get the hover to keep the hover relative the image map so it works during screen resize?

$(document).ready(function (e) {
  $('img[usemap]').rwdImageMaps();
});

function showHover(modal) {
  $('#dominican').css({left: ($('#earth').offset().left + ( 182)) + 'px', top: ($('#earth').offsetTop) + 'px'});
  $('#mexico').css({left: ($('#earth').offset().left + ( 84)) + 'px', top: ($('#earch').offsetTop) + 'px'});

  console.log('earth width: ', $('#earth').width());
  if (modal === 'dominican') {
    $('#dominican').delay(250).fadeIn(250);
    $('#mexico').delay(250).fadeOut(250);
  } else {
    $('#mexico').delay(250).fadeIn(250);
    $('#dominican').delay(250).fadeOut(250);
  }
}

function hideHover() {
    $('#dominican').delay(250).fadeOut(250);
    $('#mexico').delay(250).fadeOut(250);
}

.pill {
    color: #FFF !important;
    width: 150px;
    height: 60px;
    padding: 10px 20px;
    text-decoration: none !important;
    font-size: 24px;
    overflow: visible;
    display: inline-block;
    line-height: 35px;
    vertical-align: bottom;
}

.footer-title {
    width: 100%;
    display: block;
    text-align: center;
    background-color: #eec364;
    text-transfom: uppercase;
    padding: 6px 0;
    color: #fff;
    margin-top: -5px;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #eec364;
    margin-left: 45%;
}

#dominican .footer-title {
    background-color: #66b8ec;
}

#dominican .arrow-down {
    border-top: 10px solid #66b8ec;
}

.left-pill {
    border-bottom: 2px solid #e68c5e;
    background-color: #eec364;
    border-bottom-left-radius: 500px;
    border-top-left-radius: 500px;
}

.left-pill:hover {
    background-color: #e68c5e;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}

.right-pill {
    background: #66b8ec;
    border: 0;
    border-bottom: 2px solid #4b8baf;
    border-bottom-right-radius: 500px;
    border-top-right-radius: 500px;
    font-size: 19px;
    line-height: 19px;
}

.right-pill:hover {
    background: #5eabd6;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}

.location-popup {
    width: 225px;
    display: none;
    position: absolute;
    top: -78px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
  <script src="https://www.prodiveinternational.com/wp-content/themes/prodivemex/js/jquery.rwdImageMaps.min.js"></script>

</head>
<body>
<div style="text-align: center;">
  <div style="position: relative;">
    <div id="mexico" class="location-popup">
      <img
        src="https://prodiveinternational.com/wp-content/uploads/2015/09/11391541_10153361315524938_5579018781886490858_n.jpg"
        style="width:225px;"/><span class="footer-title">Mexico</span>

      <div class="arrow-down"></div>
    </div>
    <div id="dominican" class="location-popup">
      <img
        src="https://prodiveinternational.com/wp-content/uploads/2015/09/11391541_10153361315524938_5579018781886490858_n.jpg"
        style="width:225px;"/><span class="footer-title">Dominican Republic</span>

      <div class="arrow-down"></div>
    </div>
    <img id="earth" style="height:auto; width: 533px;"
         src="https://www.prodiveinternational.com/wp-content/themes/prodivemex/images/Scuba_Map.jpg"
         title="Select Dive Location" usemap="#locations">

    <map name="locations">
      <area id="mexico-link" alt="Mexico" onmouseover="showHover('mexico');" onmouseout="hideHover('mexico')"
            href="https://www.prodivemex.com/" shape="poly" coords="106,186,243,182,241,268,116,264"/>
      <area id="dominican-link" alt="Dominican Republic" onmouseover="showHover('dominican');" onmouseout="hideHover('dominican')"
            href="https://prodiveinternational.com/" shape="poly" coords="273,181,269,268,448,266,442,181"/>
    </map>
  </div>
  <br/>
    <span style="text-align: center; font-size: 32px;">
      Choose Your <strong>Paradise</strong>
      <br/>
      <br/>
      <div>
        <a class="pill left-pill" href="https://www.prodivemex.com/" onmouseover="showHover('mexico');"
           onmouseout="hideHover('mexico')">Mexico</a><a class="pill right-pill"
                                                         href="https://prodiveinternational.com/"
                                                         onmouseover="showHover('dominican');"
                                                         onmouseout="hideHover('dominican')"><span>Dominican<br/> Republic
        </span></a>

        <div style="clear:both"></div>
      </div>
    </span>
</div>
</body>
</html>

Solution

My solution is not exactly what I needed but will do the job. I am going to layer background images that have masks. Using a fully transparent image, then set the div background to the earth. When the image map area is hovered it will layer the pop on top of the earth. The transparent image will always be on top so it maintains the area and focus.

  $(document).ready(function (e) {
    $('img[usemap]').rwdImageMaps();
  });

  function showHover(modal) {
     $('#earth').addClass('earth-' + modal);
  }

  function hideHover(modal) {
    $('#earth').removeClass('earth-' + modal)
  }

#earth {
  height: auto;
  width: 527px;
  background-image: url(https://www.prodiveinternational.com/wp-content/themes/prodivemex/images/Scuba_Map.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-size: 100%;
  transition: background-image 1s, transform 1s;
}

.earth-mexico {
  background-image: url(https://www.prodiveinternational.com/wp-content/themes/prodivemex/images/Scuba_Mexico.png), 
    url(https://www.prodiveinternational.com/wp-content/themes/prodivemex/images/Scuba_Map.jpg) !important;
}

.earth-dominican {
  background-image: url(https://www.prodiveinternational.com/wp-content/themes/prodivemex/images/Scuba_Dominican.png), 
    url(https://www.prodiveinternational.com/wp-content/themes/prodivemex/images/Scuba_Map.jpg)  !important;
}

img {
	max-width: 100%;
	height: auto;
}
.pill {
    color: #FFF !important;
    width: 150px;
    height: 60px;
    padding: 10px 20px;
    text-decoration: none !important;
    font-size: 24px;
    overflow: visible;
    display: inline-block;
    line-height: 35px;
    vertical-align: bottom;
}

.footer-title {
    width: 100%;
    display: block;
    text-align: center;
    background-color: #eec364;
    text-transfom: uppercase;
    padding: 6px 0;
    color: #fff;
    margin-top: -5px;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #eec364;
    margin-left: 45%;
}

#dominican .footer-title {
    background-color: #66b8ec;
}

#dominican .arrow-down {
    border-top: 10px solid #66b8ec;
}

.left-pill {
    border-bottom: 2px solid #e68c5e;
    background-color: #eec364;
    border-bottom-left-radius: 500px;
    border-top-left-radius: 500px;
}

.left-pill:hover {
    background-color: #e68c5e;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}

.right-pill {
    background: #66b8ec;
    border: 0;
    border-bottom: 2px solid #4b8baf;
    border-bottom-right-radius: 500px;
    border-top-right-radius: 500px;
    font-size: 19px;
    line-height: 19px;
}

.right-pill:hover {
    background: #5eabd6;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}

.location-popup {
    width: 225px;
    display: none;
    position: absolute;
    top: -78px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

  <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://www.prodiveinternational.com/wp-content/themes/prodivemex/js/jquery.rwdImageMaps.min.js"></script>


</head>

<body>
  <div style="text-align: center;">
    <img id="earth" src="https://www.prodiveinternational.com/wp-content/themes/prodivemex/images/Scuba_Blank.png" title="Select Dive Location" usemap="#locations">
    <map name="locations">
      <area id="mexico-link" alt="Mexico" onmouseover="showHover('mexico');" onmouseout="hideHover('mexico')" href="https://www.prodivemex.com/" shape="poly" coords="106,186,243,182,241,268,116,264" />
      <area id="dominican-link" alt="Dominican Republic" onmouseover="showHover('dominican');" onmouseout="hideHover('dominican')" href="https://prodiveinternational.com/" shape="poly" coords="273,181,269,268,448,266,442,181" />
    </map>
    <br/>
    <span style="text-align: center; font-size: 32px;">
      Choose Your <strong>Paradise</strong>
      <br/>
      <br/>
      <div>
        <a class="pill left-pill" href="https://www.prodivemex.com/" onmouseover="showHover('mexico');"
           onmouseout="hideHover('mexico')">Mexico</a><a class="pill right-pill"
                                                         href="https://prodiveinternational.com/"
                                                         onmouseover="showHover('dominican');"
                                                         onmouseout="hideHover('dominican')"><span>Dominican<br/> Republic</span>
        </a>
    <div style="clear:both"></div>
  </div>
  </span>
  </div>
</body>

</html>