css - 移动 jvectormap 中的提示位置？

Question

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

当用户将鼠标悬停在标记上时，带有描述的图像会出现在标记上方。不要让这张图片完全遮挡 map ，我希望将提示贴在 map 左侧，这样就不会遮挡任何东西。

我试过更改 .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 Hook (之前调用)来防止显示默认提示。

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