如何获取 javascript 生成的标题工具提示以显示 SVG答案

【问题标题】：How to get javascript generated title tooltip for SVG to show up如何获取 javascript 生成的标题工具提示以显示 SVG
【发布时间】：2023-03-25 14:32:01
【问题描述】：

我正在尝试获取 SVG 元素的工具提示。（在 Firefox 16.0.2 下测试）我尝试了这个小例子，它工作正常：

<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="test" x="20" y="30" width="200" height="150">
  <title>Test tooltip</title>
  </rect>
</svg>

但是，我需要从 javascript 生成工具提示，因为 SVG 也是从 javascript 生成的。因此，作为第一次测试，我尝试只生成工具提示：

<script type="text/javascript">
function test(text) {
  var title = document.createElement("title")
  title.text = text
  document.getElementById("test").appendChild(title)
}

</script>
</head>

<body onload="test('Test tooltip')">

<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="test" x="20" y="30" width="200" height="150">
  </rect>
</svg>

当我从 Firefox 检查结果时，标题对象看起来与从 HTML/SVG 生成的标题相同，除了 当我将鼠标悬停在矩形上时没有工具提示！我做错了什么？

【问题讨论】：

标签： javascript svg tooltip

【解决方案1】：

title 元素应该在 SVG 命名空间中，而不是默认命名空间中。因此，您应该使用createElementNS()。此外，SVG 标题元素没有 text 属性。请改用textContent。所以，这应该工作：

<script type="text/javascript">
function test(text) {
  var title = document.createElementNS("http://www.w3.org/2000/svg","title")
  title.textContent = text
  document.getElementById("test").appendChild(title)
}

</script>
</head>

<body onload="test('Test tooltip')">

<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="test" x="20" y="30" width="200" height="150">
  </rect>
</svg>

【讨论】：

@codenamezero 你的意思是<use><title></title></use>，或者你的意思是使用引用的元素中的标题？在这两种情况下：只需尝试一下，随时报告您的发现。
是的，<use><title></title></use> 这是正确的做法，因为我没有显示标题吗？
@AnkurMarwaha 当然。只需将标题元素放在您想要工具提示的任何元素中。