如何在世界地图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>