Image map area tooltip on title

Question

Im trying to make an image map and i need a tooltip to be showed on mouse hover. the html code is like below.

`<div id="harta">
<img src="/templates/it_thecity/images/map.png" width="620" height="310" class="map"  border="0" usemap="#shqiperia" />
<map name="shqiperia" id="shqiperia">
<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"}'/>
<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" />
</div>`

And I have a javascript code from a module in my site that show some tooltips on other elements not in image map.

`<script type="text/javascript">
    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);
    })();
    </script>`

How do I make a tooltip appear on mouse hover on the area elements?

Answer 1

Resolved this question time ago but have forgot to put the answer on. Here is the solution:

[http://jsfiddle.net/ove4trwa/4/][1]