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

Question

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

这里展示了我要查找的内容，只需将鼠标悬停在页面顶部的文本 "Top" 上即可：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>

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

How can I add tooltip on world map svg

html

css

svg

tooltip