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