Javascript 如何向 svg 图形添加工具提示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10643426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a tooltip to an svg graphic?
提问by nachocab
I have a series of svg rectangles (using D3.js) and I want to display a message on mouseover, the message should be surrounded by a box that acts as background. They should both be perfectly aligned to each other and to the rectangle (on top and centered). What is the best way to do this?
我有一系列 svg 矩形（使用 D3.js），我想在鼠标悬停时显示一条消息，该消息应该被一个作为背景的框包围。它们应该彼此完美对齐并与矩形（在顶部和中心）对齐。做这个的最好方式是什么？
I tried adding an svg text using the "x", "y", "width" and "height" attributes, and then prepending an svg rect. The problem is that the reference point for the text is in the middle (since I want it centered aligned I used text-anchor: middle), but for the rectangle it's the top left coordinate, plus I wanted a bit of margin around the text which makes it kind of a pain.
我尝试使用“x”、“y”、“宽度”和“高度”属性添加一个 svg 文本，然后添加一个 svg 矩形。问题是文本的参考点在中间（因为我希望它居中对齐我使用过text-anchor: middle），但对于矩形，它是左上角的坐标，而且我希望文本周围有一点边距，这使它有点像一种痛苦。
The other option was using an html div, which would be nice, because I can add the text and padding directly but I don't know how to get the absolute coordinates for each rectangle. Is there a way to do this?
另一个选项是使用 html div，这很好，因为我可以直接添加文本和填充，但我不知道如何获取每个矩形的绝对坐标。有没有办法做到这一点？
采纳答案by paxRoman
You can use the title element as Phrogz indicated. There are also some good tooltips like jQuery's Tipsy http://onehackoranother.com/projects/jquery/tipsy/(which can be used to replace all title elements), Bob Monteverde's nvd3 or even the Twitter's tooltip from their Bootstrap http://twitter.github.com/bootstrap/
您可以按照 Phrogz 的指示使用 title 元素。还有一些不错的工具提示，如 jQuery 的 Tipsy http://onehackoranother.com/projects/jquery/tipsy/（可用于替换所有标题元素）、Bob Monteverde 的 nvd3 甚至 Twitter 的 Bootstrap 工具提示http:// twitter.github.com/bootstrap/
回答by Phrogz
Can you use simply the SVG <title>elementand the default browser rendering it conveys? (Note: this is notthe same as the titleattribute you can use on div/img/spans in html, it needs to be a child elementnamed title)
你能简单地使用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>Alternatively, if you really want to show HTML in your SVG, you can embed HTML directly:
或者，如果你真的想在你的 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>…but then you'd need JS to turn the display on and off. As shown above, one way to make the label appear at the right spot is to wrap the rect and HTML in the same <g>that positions them both together.
…但是你需要 JS 来打开和关闭显示。如上所示，使标签出现在正确位置的一种方法是将 rect 和 HTML 包裹在同一<g>位置，将它们放在一起。
To use JS to find where an SVG element is on screen, you can use getBoundingClientRect(), e.g. http://phrogz.net/svg/html_location_in_svg_in_html.xhtml
要使用 JS 查找 SVG 元素在屏幕上的位置，您可以使用getBoundingClientRect()，例如http://phrogz.net/svg/html_location_in_svg_in_html.xhtml
回答by Timmmm
The only good way I found was to use Javascript to move a tooltip <div>around. Obviously this only works if you have SVG inside an HTML document - not standalone. And it requires Javascript.
我发现的唯一好方法是使用 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>回答by VocoJax
I always go with the generic css title with my setup. I'm just building analytics for my blog admin page. I don't need anything fancy. Here's some code...
我总是在我的设置中使用通用的 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);
And a screenshot of chrome...
以及 chrome 的屏幕截图...
