如何在 SVG 中显示文本的工具提示？答案

【问题标题】：How to show tooltip for text in SVG?如何在 SVG 中显示文本的工具提示？
【发布时间】：2013-11-07 09:09:27
【问题描述】：

当用户将鼠标悬停在 SVG 中的文本上时，我需要一个工具提示。此外，文本和工具提示内容应该可以使用 javascript 进行修改。

以下内容适用于 Firefox，但不适用于 Chrome。这样做的正确方法是什么？

HTML：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100" height="100">
    <rect width="100" height="100" style="fill:black;stroke-width:0"></rect>
    <text id="text1" x="50" y="15" text-anchor="end">text1</text>
    <text id="text2" x="80" y="15" text-anchor="end"
      transform="translate(0,50)">text2</text>
</svg>

Javascript（使用 jQuery）：

$('#text1').attr('title', 'Tooltip 1');
$('#text2').attr('title', 'Tooltip 2');

我的 jsfiddle：http://jsfiddle.net/getvictor/ctaVA/

【问题讨论】：

标签： javascript svg tooltip

【解决方案1】：

您可以使用<title> 元素。

请注意，那些确实使用<title> 来显示工具提示的实现通常只有在<title> 确实是其父元素的第一个子元素 时才会这样做。

来自https://developer.mozilla.org/en/docs/Web/SVG/Element/title

所以，在你的例子中，那将是

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100" height="100">
   <title id="title1">This is a tooltip</title>
   <rect width="100" height="100" style="fill:black;stroke-width:0"></rect>
   ...

【讨论】：

【解决方案2】：

标题子元素将充当工具提示。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100" height="100">
    <rect width="100" height="100" style="fill:black;stroke-width:0"></rect>
    <text id="text1" x="50" y="15" text-anchor="end"><title>Tooltip 1</title>text1</text>
    <text id="text2" x="80" y="15" text-anchor="end"
      transform="translate(0,50)"><title>Tooltip 2</title>text2</text>
</svg>

【讨论】：

工具提示是正文的一部分，如何在保留工具提示的同时修改文本？喜欢：$('#text1').text('newText');
这将修改工具提示文本。我在问如何在不吹走工具提示的情况下修改文本文本。
$('#text1').contents().eq(1).wrap("
").parent().text('New').contents()。展开（）；