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

Question

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

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

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

“图表”只是直接从图形程序获取的内联SVG（本例中为Sketch）。我没有使用任何框架或库，如D3或chartjs。请不要建议使用库或框架，因为它不是一个选项。

类似的问题，但他们没有回答我的问题： How to create an SVG "tooltip"-like box?

Answer 1

非常简单。它只需要几行Javascript。

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

另请注意图标上的pointer-events="all"，以确保鼠标被视为＆＃34; over＆＃34;即使对于具有不可见填充的位，也是一个图标元素。

＆＃13;

＆＃13;

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";
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;