如何在svg图形中添加工具提示？

Question 1

我有一系列的svg矩形（使用D3.js），我想在鼠标悬停时显示一条消息，该消息应被用作背景的框包围。它们应彼此完全对齐，并与矩形（顶部和中心）完全对齐。做这个的最好方式是什么？

我尝试使用“ x”，“ y”，“ width”和“ height”属性添加svg文本，然后在svg rect之前添加。问题是文本的参考点在中间（因为我希望它居中对齐，所以我使用text-anchor: middle），但是对于矩形，它是左上角的坐标，而且我想在文本周围留一点空白，使它有点像痛苦。

另一种选择是使用html div，这会很好，因为我可以直接添加文本和填充，但是我不知道如何获取每个矩形的绝对坐标。有没有办法做到这一点？

Question 2

您可以按照Phrogz所示使用title元素。还有一些很好的工具提示，例如jQuery的Tipsy http://onehackoranother.com/projects/jquery/tipsy/（可用来替换所有标题元素），Bob Monteverde的nvd3甚至是Bootstrap http：//中的Twitter的工具提示。twitter.github.com/bootstrap/

Question 3

您能否仅使用SVG<title>元素及其传达的默认浏览器渲染？（注：这是不一样的title，你可以上使用属性DIV / IMG /跨度在HTML，它需要一个子元素命名title）

rect {
  width: 100%;
  height: 100%;
  fill: #69c;
  stroke: #069;
  stroke-width: 5px;
  opacity: 0.5
}

<p>Mouseover the rect to see the tooltip on supporting browsers.</p>

<svg xmlns="http://www.w3.org/2000/svg">
  <rect>
    <title>Hello, World!</title>
  </rect>
</svg>

展开摘要

另外，如果您确实想在SVG中显示HTML，则可以直接嵌入HTML：

rect {
  width: 100%;
  height: 100%;
  fill: #69c;
  stroke: #069;
  stroke-width: 5px;
  opacity: 0.5
}

foreignObject {
  width: 100%;
}

svg div {
  text-align: center;
  line-height: 150px;
}

<svg xmlns="http://www.w3.org/2000/svg">
  <rect/>
  <foreignObject>
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>
        Hello, <b>World</b>!
      </div>
    </body>      
  </foreignObject>
</svg>

展开摘要

…但是然后您需要JS来打开和关闭显示。如上所示，使标签出现在正确位置的一种方法是将rect和HTML包装在同一位置<g>位置，从而将它们在一起。

要使用JS查找SVG元素在屏幕上的位置，可以使用getBoundingClientRect()，例如http://phrogz.net/svg/html_location_in_svg_in_html.xhtml

Question 4

我发现的唯一好方法是使用Javascript移动工具提示<div>。显然，这仅在HTML文档中包含SVG时才有效-而不是独立的。并且它需要Javascript。

function showTooltip(evt, text) {
  let tooltip = document.getElementById("tooltip");
  tooltip.innerHTML = text;
  tooltip.style.display = "block";
  tooltip.style.left = evt.pageX + 10 + 'px';
  tooltip.style.top = evt.pageY + 10 + 'px';
}

function hideTooltip() {
  var tooltip = document.getElementById("tooltip");
  tooltip.style.display = "none";
}

#tooltip {
  background: cornsilk;
  border: 1px solid black;
  border-radius: 5px;
  padding: 5px;
}

<div id="tooltip" display="none" style="position: absolute; display: none;"></div>

<svg>
  <rect width="100" height="50" style="fill: blue;" onmousemove="showTooltip(evt, 'This is blue');" onmouseout="hideTooltip();" >
  </rect>
</svg>

展开摘要

Question 5

我总是在设置中使用通用的CSS标题。我只是在为博客管理页面构建分析功能。我不需要任何花哨的东西。这是一些代码...

let comps = g.selectAll('.myClass')
   .data(data)
   .enter()
   .append('rect')
   ...styling...
   ...transitions...
   ...whatever...

g.selectAll('.myClass')
   .append('svg:title')
   .text((d, i) => d.name + '-' + i);

还有chrome的屏幕截图...

Question 6

我想出了一些仅使用HTML + CSS的方法。希望对你有帮助

.mzhrttltp {
  position: relative;
  display: inline-block;
}
.mzhrttltp .hrttltptxt {
  visibility: hidden;
  width: 120px;
  background-color: #040505;
  font-size:13px;color:#fff;font-family:IranYekanWeb;
  text-align: center;
  border-radius: 3px;
  padding: 4px 0;
  position: absolute;
  z-index: 1;
  top: 105%;
  left: 50%;
  margin-left: -60px;
}

.mzhrttltp .hrttltptxt::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #040505 transparent;
}

.mzhrttltp:hover .hrttltptxt {
  visibility: visible;
}

<div class="mzhrttltp"><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#e2062c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><div class="hrttltptxt">علاقه&zwnj;مندی&zwnj;ها</div></div>

展开摘要