Javascript 如何向svg图形添加工具提示？

我有一系列svg矩形（使用D3.js），我想在鼠标上方显示一条消息，消息周围应该有一个作为背景的框。它们都应该彼此完全对齐，并与矩形对齐（在顶部并居中）。最好的方法是什么

我尝试使用“x”、“y”、“width”和“height”属性添加svg文本，然后在svg rect前面加上前缀。问题是文本的参考点在中间（因为我希望它是对齐的，我使用的是代码>文本锚：中间< /代码>），但是对于矩形，它是左上角坐标，另外，我希望文本周围有一个边距，这使得它成为一种痛苦。

另一个选项是使用HTMLdiv，这很好，因为我可以直接添加文本和填充，但我不知道如何获得每个矩形的绝对坐标。有什么方法可以做到这一点吗？

您可以简单地使用和它所传达的默认浏览器渲染吗？（注意：这与html中可以在div/img/span上使用的

title

属性不同，它需要是名为

title

的子元素）

rect{
宽度：100%；
身高：100%；
填充：#69c；
行程#069；
笔画宽度：5px；
不透明度：0.5
}

将鼠标悬停在rect上，查看支持浏览器的工具提示

你好，世界！

---

您可以使用如Phrogz所示的title元素。还有一些很好的工具提示，比如jQuery的Tipsy（可以用来替换所有标题元素）、Bob Monteverde的nvd3，甚至Twitter的引导工具提示。我发现唯一好的方法就是使用Javascript移动工具提示。显然，这只适用于HTML文档中包含SVG的情况，而不是独立的。而且它需要Javascript

函数显示工具提示（evt，文本）{
让tooltip=document.getElementById（“tooltip”）；
tooltip.innerHTML=文本；
tooltip.style.display=“块”；
tooltip.style.left=evt.pageX+10+'px'；
tooltip.style.top=evt.pageY+10+'px'；
}
函数hideTooltip（）{
var tooltip=document.getElementById（“工具提示”）；
tooltip.style.display=“无”；
}

#工具提示{
背景：玉米丝；
边框：1px纯黑；
边界半径：5px；
填充物：5px；
}

---

我的设置总是使用通用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的屏幕截图

---

我想出了一些只使用HTML+CSS的东西。希望对你有用

.mzhrttltp{
位置：相对位置；
显示：内联块；
}
.mzhrttltp.hrttltptxt{
可见性：隐藏；
宽度：120px；
背景色：#040505；
字体大小：13px；颜色：#fff；字体系列：IranYekanWeb；
文本对齐：居中；
边界半径：3px；
填充：4px0；
位置：绝对位置；
z指数：1；
最高：105%；
左：50%；
左边距：-60px；
}
.mzhrttltp.hrttltptxt:：之后{
内容：“；
位置：绝对位置；
底部：100%；
左：50%；
左边距：-5px；
边框宽度：5px；
边框样式：实心；
边框颜色：透明透明#040505透明；
}
.mzhrttltp:hover.hrttltptxt{
能见度：可见；
}

---

علاه&zwnj；مندی&zwnj；svg上的

，写标题的正确方法

<svg>
  <title id="unique-id">Checkout</title>
</svg>

结账

---

查看此处了解更多详细信息

如果没有其他方法，我想这是一个问题，将标记用于它的设计目的吗？只是它看起来不太好，但我感谢您的回答对我来说很好地为svg元素插入标题！回答得好。但是请注意，Firefox上的SVG大小为0x0？看起来你必须像

那样指定宽度和高度，不幸的是

对移动设备没有任何影响。我在Chrome 80中没有看到第二个示例的任何工具提示