title: Image map area tooltip on title
body: <p>Im trying to make an image map and i need a tooltip to be showed on mouse hover. the html code is like below.</p>
  
  <pre><code>`&lt;div id="harta"&gt;
  &lt;img src="/templates/it_thecity/images/map.png" width="620" height="310" class="map"  border="0" usemap="#shqiperia" /&gt;
  &lt;map name="shqiperia" id="shqiperia"&gt;
  &lt;area shape="poly" coords="266,69,260,74,260,82,255,90,251,97,246,98,246,104,240,103,239,107,240,113,237,116,239,121,243,121,248,123,251,120,252,114,256,115,260,117,263,114,263,109,263,105,265,104,268,104,269,100,271,96,272,91,270,89,267,81,267,75,266,69" href="#" target="_self" alt="Shkodra" title="Shkodër (3)" class="sh masterTooltip" data-maphilight='{"groupBy":".sh"}'/&gt;
  &lt;area shape="rect" coords="44,56,122,76" href="#" alt="Shkodër" class="sh masterTooltip" data-maphilight='{"groupBy":".sh","fill":false, "stroke":false}' title="3 Universitete" /&gt;
  &lt;/div&gt;`
  </code></pre>
  
  <p>And I have a javascript code from a module in my site that show some tooltips on other elements not in image map.</p>
  
  <pre><code>`&lt;script type="text/javascript"&gt;
      window.addEvent('domready', function() {
          $$('.hasTip').each(function(el) {
              var title = el.get('title');
              if (title) {
                  var parts = title.split('::', 2);
                  el.store('tip:title', parts[0]);
                  el.store('tip:text', parts[1]);
              }
          });
          var JTooltips = new Tips($$('.hasTip'), { fixed: false});
      });
  
      (function() {
          var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
          po.src = 'https://apis.google.com/js/plusone.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
      &lt;/script&gt;`
  </code></pre>
  
  <p>How do I make a tooltip appear on mouse hover on the <code>area</code> elements?</p>