title: How to position tooltip top center of path? SVG Map
body: <p>New to javascript and trying to position tooltip top center of element/path on SVG map. Currently, the tooltip follows the <code>.mousemove</code> but would like it to be fixed top center, preferably with a slight offset so it barely overlaps the selected area.</p>
  
  <p>Here is the code on JSfiddle: <a href="https://jsfiddle.net/mwalker005/a8vrmw06/" rel="nofollow noreferrer">https://jsfiddle.net/mwalker005/a8vrmw06/</a></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-js lang-js prettyprint-override"><code>$("path, polygon").hover(function(e) {
    $('#info-box').css('display','block');
    $('#info-box').html($(this).data('info'));
  });
  
  $("path, polygon").mouseleave(function(e) {
    $('#info-box').css('display','none');
  });
  
  $(document).mousemove(function(e) {
    $('#info-box').css('top',e.pageY-$('#info-box').height()-40);
    $('#info-box').css('left',e.pageX-($('#info-box').width())/2);
  }).mouseover();
  
  var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) &amp;&amp; !window.MSStream;
  if(ios) {
    $('abbr').on('click touchend', function() { 
      var link = $(this).attr('href');   
      window.open(link,'_blank');
      return false;
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#map-example{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  
  
  path:hover, polygon:hover {
    fill: #20487c !important;
  
  }
  
  #info-box {
    background-color: #333;
    border-bottom: 3px solid #3498DB;  
    color: #fff;
    display: none;
    font-family: arial;
    left: 0px;
    padding: 5px;
    position: absolute;
    top: 0px;
    width: 150px;
    z-index: 1;
  }
  
  #info-box:after {
      content: '';
      display: block;  
      position: absolute;
      left: 35px;
      top: 100%;
      width: 0;
      border: 10px solid transparent;
      border-top-color: #3498DB;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-2.2.4.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="info-box"&gt;&lt;/div&gt;
  
  &lt;svg version="1.1" id="map-example" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 300 200" style="enable-background:new 0 0 300 200;" xml:space="preserve"&gt;
  &lt;path id="area 01" data-info="&lt;div&gt;Area 01:&lt;/div&gt;&lt;div&gt;More Info about area&lt;/div&gt;" fill="#D3D3D3" d="M90.5,72.5v12l7,1v12h20l3-27C120.5,70.5,108,77,90.5,72.5z"/&gt;
  &lt;path id="area 02" data-info="&lt;div&gt;Area 02:&lt;/div&gt;&lt;div&gt;More Info about area&lt;/div&gt;" fill="#D3D3D3" d="M89,72v14l7,1v12h21v17l-23-2l-11-6V93c0,0-6-7-16-5l5-33C72,55,80,59,89,72z"/&gt;
  &lt;polygon id="area 03" data-info="&lt;div&gt;Area 03:&lt;/div&gt;&lt;div&gt;More Info about area&lt;/div&gt;" fill="#D3D3D3" points="120,87 119,97 119,112 138,120 155,108 155,93 136,83 "/&gt;
  &lt;polygon id="area 04" data-info="&lt;div&gt;Area 04:&lt;/div&gt;&lt;div&gt;More Info about area&lt;/div&gt;" fill="#D3D3D3" points="138,122 143,131 146,129 152,137 155,135 159,138 159,152 174,146 199,131 
   225,117 219,108 199,108 170,101 157,94 156.5,108.5 "/&gt;
  &lt;path id="area 05" data-info="&lt;div&gt;Area 05:&lt;/div&gt;&lt;div&gt;More Info about area&lt;/div&gt;" fill="#D3D3D3" d="M122,70l-2,15l17-4l33,18l15,3l15-9l-21-29l-5,3l-17-19c0,0-16,10-22,15
   C127.9,68.9,122,70,122,70z"/&gt;
  &lt;path id="area 06" data-info="&lt;div&gt;Area 06:&lt;/div&gt;&lt;div&gt;More Info about area&lt;/div&gt;" fill="#D3D3D3" d="M158,47.2l16.8,18.1l4.9-3l22.7,31.2l-15.8,10L198,106l22.7,1l5.3,9l12-6l7.5-27.1
   l-4.9-20.1l-24.7-32.2c0,0-7.9-8-20.8-1l-3-3C192.1,26.6,175,36,158,47.2z"/&gt;
  &lt;polygon id="area 07" data-info="&lt;div&gt;Area 07:&lt;/div&gt;&lt;div&gt;More Info about area&lt;/div&gt;" fill="#D3D3D3" points="102,117 101,139 93,145 95,150 95,156 90,156 87,150 83,150 83,157 73,157 
   73,154 78,150 70,137 67,139 65,134 67,130 75.5,129.5 79.5,122.5 83.5,110.5 94.5,116.5 "/&gt;
  &lt;polygon id="area 08" data-info="&lt;div&gt;Area 08:&lt;/div&gt;&lt;div&gt;More Info about area&lt;/div&gt;" fill="#D3D3D3" points="81,95 81,108 78,121 74,128 65,128 63,132 54,132 54,128 40,127 40,122 
   43,122 47,117 51,117 51,110 56,110 56,95 63,95 67,90 70,90 77,91 "/&gt;
  &lt;polygon id="area 09" data-info="&lt;div&gt;Area 09:&lt;/div&gt;&lt;div&gt;More Info about area&lt;/div&gt;" fill="#D3D3D3" points="104,118 119,118 119,114 135,121 142,133 146,131 151,138 147,141 141,136 
   120,150 104,137 "/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>