在jvectormap中移动尖端位置？

Question

我正在使用 jvectormap 来组织在全球范围内收集的图像。

当用户将鼠标悬停在标记上时，带有说明的图像会出现在标记上方。与其让这张图片完全遮住地图，不如将笔尖贴在地图的左侧，这样就不会遮住任何东西。

我已尝试更改 .jvectormap-tip 的位置值。我不太清楚如何将提示固定在左侧（其默认行为是直接悬停在标记上）。

.jvectormap-tip {
    position: absolute;
    display: none;
    border: solid 1px #CDCDCD;
    border-radius: 3px;
    background: #292929;
    color: white;
    font-family: sans-serif, Verdana;
    font-size: smaller;
    padding: 3px;
}

我希望位置属性需要更改，以及其他一些东西。不知道是什么。。

Answer 1

我建议您创建自己的自定义定位 div 并使用 provided functions 显示/隐藏它。使用 on*TipShow 钩子（之前调用）来防止显示默认提示。

function showInfo(code) {
  /* Show custom div */
}
function hideInfo() {
  /* Hide custom div */
}

$("#map").vectorMap({
  map: "world_mill",
  // other settings...
  onMarkerTipShow: function(e, tip, code) {
    return false; /* Don't show the standard marker tip */
  },
  onMarkerOver: function(e, code) {
    showInfo(code);
  },
  onMarkerOut: function(e, code) {
    hideInfo();
  },
  onRegionTipShow: function(e, tip, code) {
    return false; /* Don't show the standard region tip */
  },
  onRegionOver: function(e, code) {
    showInfo(code);
  },
  onRegionOut: function(e, code) {
    hideInfo();
  }
});