Javascript 如何仅在jVectorMap中单击某个区域时显示工具提示，并将其打开？

我在用这个。默认情况下，悬停时显示工具提示

以下是我想要实现的目标-

单击时仅显示工具提示（部分工作，但工具提示应位于鼠标光标上方。我不知道如何获取鼠标光标位置。）

让工具提示打开，直到用户明确单击关闭 代码：

$（'#map'）.vectorMap({
地图：“us_aea_en”，
背景色：“透明”，
地区风格：{
首字母：{
填写：“818486”
}
},
onRegionClick：函数（e，代码）{
var map=$（'#map'）.vectoramap（'get'，'mapObject'）；
map.tip.show（）；
html（代码+“点击关闭”
”；
},
onRegionTipShow：函数（e、提示、代码）{
e、 预防默认值（）；
}
});

欲望行为

---

我让它按照您想要的方式工作，并更新了您的小提琴：

Javascript

 $('#map').vectorMap({
    map: "us_aea_en",
    backgroundColor: "transparent",
    regionsSelectable: true,
    regionsSelectableOne: true,
    regionStyle: {
        initial: {
            fill: "#818486"
        },
        selected: {
            fill: "#C0C0C0"
      }
    },
    onRegionClick: function (e, code) {
        var map = $('#map').vectorMap('get', 'mapObject');
        var customTip=$('#customTip');

        customTip.css({
          left: left,
          top: top
        })

        customTip.html(map.tip.text());
      customTip.show();
      customTip.append(code + "<p>Click to Close</p>");
        customTip.children("p").click(function(){
            map.clearSelectedRegions();
           customTip.hide(); 
        }) 

    },
    onRegionTipShow: function (e, tip, code) {
        e.preventDefault();
    }
});

var left,top;
$('#map').vectorMap('get', 'mapObject').container.mousemove(function(e){
   left = e.pageX - 40;
   top = e.pageY - 60;

});

---

可以通过填充或笔划参数高亮显示选定区域。更多细节可以在jVectorMap的文档中找到。这里有一个简短的例子：

regionStyle: {
   selected: {
      stroke: '#000',
      "stroke-width": 1.3,
      "stroke-opacity": 1
   }
},

---

您应该首先注意，默认功能是修改每次悬停时的工具提示内容。谢谢您的回答。是否可以突出显示所选状态（区域）？是的。看看我更新的答案和提琴。很酷的提示：

onRegionTipShow

部分可以用来防止默认的工具提示显示功能，而不会影响任何属性或样式。

<div id="map"></div>
<div id="x"></div>
<div id="y"></div>
<div id="customTip" class="jvectormap-tip"></div>

#map {
    width: 500px;
    height: 400px;
}

regionStyle: {
   selected: {
      stroke: '#000',
      "stroke-width": 1.3,
      "stroke-opacity": 1
   }
},