在jvectormap中移动尖端位置?

时间:2019-05-19 18:02:39

标签: css jvectormap

我正在使用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;
}

我希望position属性以及其他内容需要更改。不知道怎么办。

1 个答案:

答案 0 :(得分:0)

我建议您创建自己的自定义位置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();
  }
});