imagemapster - ImageMapster: ツールチップをマウスに追従させる方法

Question

ツールチップを領域の隅ではなく、マウスが現在ある場所のすぐ上に表示する方法があるかどうか疑問に思っていました。したがって、マウスがアクティブな間、マウスを「追従」する必要があります。

誰かがこのようなことをしているサンプルコードを持っているなら、私は本当に感謝しています.

Answer 1

エリアごとに一意の ID を追加し、そのエリアの mouseenter または mouseover をチェックして、マウスの位置を取得し、ツールチップを再配置します。

<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);
        });
    }
});