悬停SVG元素时如何显示工具提示div [英] How to display a tooltip div when an SVG element is hovered

问题描述

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

I requirement for an inline SVG chart which has a "more information" icon which should trigger "tooltip" on hover. See attached.

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

I have the tooltip div styled and is used in other places but I also need it to trigger on the information icon inside the SVG.

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

I know I can't add the tooltip html inside SVG, so what other options are available to me?

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

The "chart" is just inline SVG taken directly from a graphic programme (Sketch in this instance). Am not using any frameworks or libraries like D3 or chartjs. Please don't suggest to use a library or framework as it's not an option.

类似的问题，但他们没有回答我的问题: 如何创建类似SVG工具提示"的框?

Similar SO question but they don't answer my question: How to create an SVG "tooltip"-like box?

推荐答案

这很简单.它只需要几行Javascript.

It's pretty simple. It just requires a few lines of Javascript.

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

When we mouse over the icon, we position the popup and show it. On mouseout, we hide it again.

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

Also note the pointer-events="all" on the icon, which ensures that the mouse is considered "over" an icon element even for the bits that have an invisible fill.

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>

这篇关于悬停SVG元素时如何显示工具提示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！