悬停SVG元素时如何显示工具提示div

Question

我需要一个内联SVG图表，该图表应具有“更多信息”图标，该图标应在悬停时触发“工具提示”。见附件。

我具有工具提示div样式，并且已在其他地方使用，但我还需要它来触发SVG内的信息图标。

我知道我无法在SVG内添加工具提示html，那么还有哪些其他选项可用？

“图表”只是直接从图形程序中提取的内联SVG（在这种情况下为Sketch）。没有使用任何框架或库，例如D3或chartjs。请不要建议使用库或框架，因为这不是一种选择。

类似的问题，但他们没有回答我的问题：如何创建类似 SVG“工具提示”的框？

Answer 1

很简单 它只需要几行Javascript。

当我们将鼠标悬停在图标上时，我们将弹出窗口定位并显示它。鼠标移出时，我们再次将其隐藏。

还要注意pointer-events="all"图标上的，以确保即使对于不可见填充的位，也将鼠标视为在图标元素“上方”。

var myicon = document.getElementById("myicon");
var mypopup = document.getElementById("mypopup");

myicon.addEventListener("mouseover", showPopup);
myicon.addEventListener("mouseout", hidePopup);

function showPopup(evt) {
  var iconPos = myicon.getBoundingClientRect();
  mypopup.style.left = (iconPos.right + 20) + "px";
  mypopup.style.top = (window.scrollY + iconPos.top - 60) + "px";
  mypopup.style.display = "block";
}

function hidePopup(evt) {
  mypopup.style.display = "none";
}

body {
  background-color: #33333f;
}

#mypopup {
  width: 400px;
  padding: 20px;
  font-family: Arial, sans-serif;
  font-size: 10pt;
  background-color: white;
  border-radius: 6px;
  position: absolute;
  display: none;
}

#mypopup::before {
  content: "";
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background-color: white;
  position: absolute;
  left: -6px;
  top: 68px;
}

<svg width="400" height="400">
  <g id="myicon" pointer-events="all">
    <circle cx="100" cy="150" r="14" fill="none" stroke="gold" stroke-width="2"/>
    <circle cx="100" cy="144" r="2" fill="gold"/>
    <rect x="98.5" y="148" width="3" height="10" fill="gold"/>
  </g>
</svg>

<div id="mypopup">
  <h3>Popup title</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>