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

ImageMapster：如何使工具提示跟随鼠标

1 个答案: