如何创建类似 SVG“工具提示”的框？答案

【问题标题】：How to create an SVG "tooltip"-like box?如何创建类似 SVG“工具提示”的框？
【发布时间】：2010-09-11 06:35:39
【问题描述】：

给定一个现有的有效 SVG 文档，创建“信息弹出窗口”的最佳方法是什么，这样当您悬停或单击某些元素（比如说）时，您会弹出一个任意数量的框（即不仅仅是一行tooltip) 的额外信息？

这应该至少在 Firefox 中正确显示，并且如果图像被光栅化为位图格式，则它是不可见的。

【问题讨论】：

Morais 如果您缩小问题范围可能会有所帮助。也许更具体一些关于您可以使用哪些技术以及您需要支持哪些浏览器（Firefox 和其他什么？）只是一个建议。
接受的答案现在已经过时，但尼尔弗雷泽的答案仍然正确。

标签： popup svg tooltip

【解决方案1】：

这个问题是在 2008 年提出的。在这四年间，SVG 得到了迅速的改进。现在我知道的所有平台都完全支持工具提示。使用<title> 标签（不是属性），你会得到一个原生的工具提示。

这里是文档： https://developer.mozilla.org/en-US/docs/SVG/Element/title

【讨论】：

注意：当您使用 javascript 动态添加它时，这似乎不起作用。
另外，你不能设置原生工具提示样式 :(
我将它与 d3 可视化框架一起使用，以使用 javascript 添加工具提示，它在最近版本的 chrome 和 firefox 中对我有用。代码类似于chart.selectAll("g.cell.child").append("title").text(function(d) { return d.size;} );
这似乎在 Firefox (50.0) 中有效，但在 Chrome (54.0.2840.100) 中无效。

【解决方案2】：

<svg>
  <text id="thingyouhoverover" x="50" y="35" font-size="14">Mouse over me!</text>
  <text id="thepopup" x="250" y="100" font-size="30" fill="black" visibility="hidden">Change me
    <set attributeName="visibility" from="hidden" to="visible" begin="thingyouhoverover.mouseover" end="thingyouhoverover.mouseout"/>
  </text>
</svg>

更多解释可参见here。

【讨论】：

这似乎不适用于 Firefox 3.0.1 - 应该可以吗？
IBM 站点的链接现在已断开。
@kasuparu 我刚刚向 ibm 发送了有关断开链接的反馈。该目录中的某些文件仍然存在，因此可能是错误的。
投反对票，因为链接尚未修复。
更改了指向 archive.org 的链接

【解决方案3】：

由于 <set> 元素不适用于 Firefox 3，我认为您必须使用 ECMAScript。

如果您将以下脚本元素添加到 SVG：

  <script type="text/ecmascript"> <![CDATA[

    function init(evt) {
        if ( window.svgDocument == null ) {
        // Define SGV
        svgDocument = evt.target.ownerDocument;
        }
        tooltip = svgDocument.getElementById('tooltip');
    }

    function ShowTooltip(evt) {
        // Put tooltip in the right position, change the text and make it visible
        tooltip.setAttributeNS(null,"x",evt.clientX+10);
        tooltip.setAttributeNS(null,"y",evt.clientY+30);
        tooltip.firstChild.data = evt.target.getAttributeNS(null,"mouseovertext");
        tooltip.setAttributeNS(null,"visibility","visible");
    }

    function HideTooltip(evt) {
        tooltip.setAttributeNS(null,"visibility","hidden");
    }
    ]]></script>

您需要在 SVG 元素中添加 onload="init(evt)" 才能调用 init() 函数。

然后，在 SVG 的末尾添加工具提示文本：

<text id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>

最后，给每个你想要鼠标悬停功能的元素添加：

onmousemove="ShowTooltip(evt)"
onmouseout="HideTooltip(evt)"
mouseovertext="Whatever text you want to show"

我已经在http://www.petercollingridge.co.uk/interactive-svg-components/tooltip写了一个更详细的解释并改进了功能

我还没有包含多行工具提示，这需要多个 <tspan> 元素和手动换行。

【讨论】：

【解决方案4】：

这应该可行：

nodeEnter.append("svg:element")
   .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
   .append("svg:title")
   .text(function(d) {return d.Name+"\n"+d.Age+"\n"+d.Dept;}); // It shows the tool tip box with item [Name,Age,Dept] and upend to the svg dynamicaly

【讨论】：