如何向svg图形添加工具提示？
我有一系列的svg矩形(使用D3.js)，我想在鼠标悬停时显示一条消息，该消息应该被一个作为背景的框所包围。它们应该彼此完全对齐，并且与矩形(在顶部和居中)完全对齐。做这件事最好的方法是什么？
我尝试使用"x“、"y”、"width“和"height”属性添加一个svg文本，然后添加一个svg rect。问题是，文本的参考点在中间(因为我希望它居中对齐，所以我使用了text-anchor: middle)，但对于矩形，它是左上角坐标，再加上我想在文本周围留出一点空白处，这让它有点麻烦。
另一种选择是使用html div，这会很好，因为我可以直接添加文本和填充，但我不知道如何获得每个矩形的绝对坐标。有没有办法做到这一点？
回答 6
Stack Overflow用户
发布于 2012-05-18 05:06:20
您可以按照Phrogz的指示使用title元素。还有一些很好的工具提示，比如jQuery的Tipsy http://onehackoranother.com/projects/jquery/tipsy/ (可以用来替换所有的标题元素)、Bob Monteverde的nvd3，甚至还有来自其Bootstrap http://twitter.github.com/bootstrap/的推特的工具提示
Stack Overflow用户
发布于 2018-05-26 22:52:08
我发现的唯一好方法是使用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>
Stack Overflow用户
发布于 2020-11-11 23:30:57
在svg上，正确的标题书写方式
<svg>
<title id="unique-id">Checkout</title>
</svg>请查看此处了解更多详细信息https://css-tricks.com/svg-title-vs-html-title-attribute/
https://stackoverflow.com/questions/10643426
复制相似问题