ImageMapster: Как сделать подсказку следовать за мышью

Question

Мне было интересно, если бы был способ сделать всплывающую подсказку не появляться в углу области, а вместо этого чуть выше, где бы мы ни находились. Таким образом, нужно было бы «следить» за мышью, пока она активна.

Если у кого-нибудь есть образец кода, делающий что-то подобное, я был бы очень благодарен.

Answer 1

Для каждой области добавить уникальный идентификатор, а затем проверить MouseEnter или наведении курсора мыши на этой области и получить позицию мыши, а затем переместить всплывающую подсказку:

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