title: Responsive Image Map popup
body: <p>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.</p>
  
  <p>Live Site:
  <a href="https://prodiveinternational.com/international-landing-page/" rel="nofollow">https://prodiveinternational.com/international-landing-page/</a></p>
  
  <p>Plunker: 
  Here is a plunkr: <a href="http://plnkr.co/edit/bcZwn0oUnPGUnwvodo32?p=preview" rel="nofollow">http://plnkr.co/edit/bcZwn0oUnPGUnwvodo32?p=preview</a></p>
  
  <p>Is there any way to get the hover to keep the hover relative the image map so it works during screen resize?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt; 
    &lt;script src="https://www.prodiveinternational.com/wp-content/themes/prodivemex/js/jquery.rwdImageMaps.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div style="text-align: center;"&gt;
    &lt;div style="position: relative;"&gt;
      &lt;div id="mexico" class="location-popup"&gt;
        &lt;img
          src="https://prodiveinternational.com/wp-content/uploads/2015/09/11391541_10153361315524938_5579018781886490858_n.jpg"
          style="width:225px;"/&gt;&lt;span class="footer-title"&gt;Mexico&lt;/span&gt;
  
        &lt;div class="arrow-down"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="dominican" class="location-popup"&gt;
        &lt;img
          src="https://prodiveinternational.com/wp-content/uploads/2015/09/11391541_10153361315524938_5579018781886490858_n.jpg"
          style="width:225px;"/&gt;&lt;span class="footer-title"&gt;Dominican Republic&lt;/span&gt;
  
        &lt;div class="arrow-down"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;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"&gt;
  
      &lt;map name="locations"&gt;
        &lt;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"/&gt;
        &lt;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"/&gt;
      &lt;/map&gt;
    &lt;/div&gt;
    &lt;br/&gt;
      &lt;span style="text-align: center; font-size: 32px;"&gt;
        Choose Your &lt;strong&gt;Paradise&lt;/strong&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;div&gt;
          &lt;a class="pill left-pill" href="https://www.prodivemex.com/" onmouseover="showHover('mexico');"
             onmouseout="hideHover('mexico')"&gt;Mexico&lt;/a&gt;&lt;a class="pill right-pill"
                                                           href="https://prodiveinternational.com/"
                                                           onmouseover="showHover('dominican');"
                                                           onmouseout="hideHover('dominican')"&gt;&lt;span&gt;Dominican&lt;br/&gt; Republic
          &lt;/span&gt;&lt;/a&gt;
  
          &lt;div style="clear:both"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>