title: Dynamically assign with jquery css top and left for an image map?
body: <p>I have an image map that has a function return text from the alt attribute. At the moment the pop is a css layer called overlay that is assigned top and left coordinates, so that the popup no matter where on the image map will always be in the same position, however I'm wondering if there is a way to assign the top and left such that it is closest to the image map being hover on?</p>
  <p>It looks like this, notice that the popup is always on the left corner.
  <a href="https://i.stack.imgur.com/yvfOC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yvfOC.png" alt="enter image description here" /></a></p>
  <p>Here  is the code I adapter from another jfiddle.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"&gt;&lt;/script&gt;
      &lt;style id="compiled-css" type="text/css"&gt;
      #map {
          position: relative;
      }
      #overlay {
          position: absolute;
          background: #000;
          color: #fff;
          top: 50px;
          left: 50px;
      
          width: 100px;
      
      }
        &lt;/style&gt;
      &lt;div id="map"&gt;
          &lt;div id="overlay"&gt;&lt;/div&gt;
      &lt;img src="https://i.imgur.com/f9HmUmf.jpg" alt="test" usemap="#g1"&gt;
      &lt;/div&gt;
      
      &lt;map name="g1"&gt;
        &lt;area shape="rect" coords="0,0,100,100" alt="one" href="http://www.one.com"&gt;
        &lt;area shape="rect" coords="100,0,200,100" alt="two" href="http://www.two.com"&gt;
        &lt;area shape="rect" coords="200,0,300,100" alt="three" href="http://www.three.com"&gt;
        &lt;area shape="rect" coords="300,0,400,100" alt="4" href="http://www.four.com"&gt;
        &lt;area shape="rect" coords="400,0,500,100" alt="5" href="http://www.five.com"&gt;
        
        &lt;area shape="rect" coords="0,100,100,200" alt="1b" href="http://www.onebottom.com"&gt;
        &lt;area shape="rect" coords="100,100,200,200" alt="2b" href="http://www.twobottom.com"&gt;
        &lt;area shape="rect" coords="200,100,300,200" alt="3b" href="http://www.threebottom.com"&gt;
        &lt;area shape="rect" coords="300,100,400,200" alt="4b" href="http://www.fourbottom.com"&gt;
        &lt;area shape="rect" coords="400,100,500,200" alt="5b" href="http://www.fivebottom.com"&gt;
      &lt;/map&gt;    
      
      &lt;script type="text/javascript"&gt;//&lt;![CDATA[
      $('area').each(function(){
          var area = $(this),
              alt = area.attr('alt');
          area.mouseenter(function(){
              $('#overlay').html(alt);
          }).mouseleave(function(){
              $('#overlay').html('');
          });
      });
        //]]&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>