ImageMapster: How to make the tooltip follow the mouse

Question

I was wondering if there was a way to make the tooltip not appear at the corner of an area, but instead just above wherever the mouse currently is. It would thus need to "follow" the mouse while it's active.

If anyone has any sample code doing something like this I would be really thankful.

Answer 1

For each area I add unique ID, then check mouseenter or mouseover for that area and get mouse position and then reposition tooltip:

<map id="map" name="map"><area id="area1" shape="poly" name="area1" alt="" coords="607,320, 620,321,....... 

var xOffset;
var yOffset;

$('#map_container').mapster(
{
    fillOpacity: 0.2,
    fillColor: "FFFFFF",
    stroke: true,
    strokeColor: "ffcb0b",
    strokeOpacity: 0.8,
    strokeWidth: 6,
    singleSelect: true,
    mapKey: 'name',
    listKey: 'name',
    showToolTip: true,
    onClick: function (e) {
        //
    },
    toolTipClose: ["area-click", "area-mouseout"],
    staticState: true,
    onShowToolTip: function (e) {
        var key_name = e.key;
        //here we call that unique ID for mouseenter or mouseover             
        $("#"+key_name).on("mouseenter",  function (data) {
           xOffset = data.pageX;
           yOffset = data.pageY;
           console.log("xOffset " + xOffset + " & " + "yOffset " + yOffset);
           //tooltip class name already is given by imageMapster and we change to new position
           $(".mapster_tooltip").css("left", xOffset + 10);
           $(".mapster_tooltip").css("top", yOffset);
        });
    }
});