如何在世界地图 svg 上添加工具提示

Question

我有一个世界上所有国家的SVG，每当您将鼠标悬停在已经在国家/地区上方突出显示为蓝色的国家/地区时，我想添加一个工具提示。该工具提示将包含名称列表。我怎样才能做到这一点？

我正在寻找的内容在这里演示，只需将鼠标悬停在页面顶部的文本"顶部"上即可：https://www.w3schools.com/css/css_tooltip.asp

这是 SVG 地图：http://occ.uk.com/occ/associate-members/

这是地图的代码：https://www.dropbox.com/s/ofm2io1ahv2k7gh/SVGWorldMapSharing.html?dl=0

非常感谢任何帮助，谢谢。

Answer 1

代码可在https://codepen.io/anon/pen/WdjJzz

将下面的 onmouseevent 处理程序添加到您的 svg 元素中;即 handleMouseMove="onmousemove(event(">

function handleMouseMove(event) {
  var countryId = event.target.id;
  var tooltip = document.getElementById("tooltip");
  switch (countryId) {
    case "AT":
    case "FR":
    case "DE":
    case "IT":
    case "NL":
    case "AU":
    case "IL":
      break;
    default:
      return tooltip.classList.remove("active");
  }
  var x = event.clientX;
  var y = event.clientY;
  tooltip.style.left = (x + 20) + "px";
  tooltip.style.top = (y - 20) + "px";
  tooltip.innerHTML = countryId;
  tooltip.classList.add("active");
}

使用以下 css

.tooltiptext {
  display: none;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  position: fixed;
  z-index: 1;
}
.tooltiptext.active {
  display: initial;
}

将以下元素添加到您的 html 中，就在 svg 元素之前。您可以根据自己的工作控制工具提示内容，并且可以通过在鼠标悬停时手动更改内部 html 来动态执行此操作。

<span class="tooltiptext" id="tooltip">Tooltip text</span>