jqueryimagemapimagemapster

ImageMapster - tooltips not showing on mouseover



I started using ImageMapster JQuery plugin and got stuck pretty fast. I would like to have a tooltip showing up when I hover over an area, but it doesnt work. I use "id" parameter as an area key and would like the tooltip to be shown when I point mouse to area with id= "sam".
This is my code - its quite simple and I have no idea what I have done wrong. Could anyone help me? Problem is not in ImageMapster itself, as its other features work. Thank you

<img id="mapka" src="../Img/Maps/bigmap.JPG" usemap="#mymap" width="880">
<map id="geo_map" name="mymap">
    <area shape="rect" id="sam" coords="135,62,216,167" href="/map/samegrelo">  
</map>

<script> $(document).ready(
  function () {
     $('#mapka').mapster({
         singleSelect: true,
         fill: true,
         mapkey: 'id',
         fillOpacity: 0.3,
         fillColor: 'ff0000',
         clickNavigate: true,           
         showToolTip: true,             
         onMouseover: function (e) {
             $(this).mapster('set', false).mapster('set', true);                
         },
         onMouseout: function (e) {
             $(this).mapster('set', false);
         },
         areas: [
        {
            key: "sam",
            toolTip: "Don't mess with Texas"
        }]
     });

 })
</script>
Solution

  • Finally found where was the problem. I use "mapkey" instead of "mapKey" in function and it seems its case sensitive.