javascript - Implementing tool tips -

i've reviewed docs on imagemapster's web site, numerous posts here, can't tooltips work properly. tried posting html , js on jsfiddle.com unable work properly, here's link sample map http://www.teenspanish.com/imagemap/. it's simple idea, once map functioning can apply appropriate code real project.

1) hover effects work fine, no concern there.

2) there div under map intended hidden when page loads, visible. move mouse on 1 of hotspots replaced appropriate text, , point on map seems function properly. so, there must missing or incorrect in code regulates onmouseover , onmouseout effects.

3) there way position tooltips on map (hotspots) itself, tooltips do? is, text appears inside div under map, i'd prefer have positioned on hotspots.

i have no problem css, have virtually no experience working js, don't know start. sample created various samples i'm come across since stumbling on imagemapster. if review code , let me know what's wrong appreciated, suggestions or links helpful resources.

here's code:

var image = $('#map1');  $(document).ready(function () {      $('#map1').mapster({          singleselect : true,          clicknavigate : false,          mapkey: 'color',          listkey: 'name',          fillcolor: "ffffff",          fillopacity : 0.5,          onmouseover: function (e) {              $('#mydiv').html(xref[e.key]);          },          onmouseout: function (e) {              if(!$(this).hasclass('clicked')) {                  $('#mydiv').html('');              }          },      });  }); 

you can position div holding tooltip according mouse position:

css:

#mydiv {     position: absolute;     z-index: 10; } 

js:

onmouseover: function (args) {     var container = $("#mydiv"),         event = args.e;     container.html(xref[args.key]).show();     container.css({         "top": event.clienty,         "left": event.clientx     }); }, onmouseout: function (args) {     $("#mydiv").hide(); } 

don't forget remove comma after onmouseout.