How to get javascript generated title tooltip for SVG to show up

问题

I'm trying to get a tooltip for an SVG element. (Testing under Firefox 16.0.2) I tried this little example and it works fine:

<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>

But, I need to generate the tooltip from javascript, as the SVG is also being generated from javascript. So just as a first test, I tried generating just the tooltip:

<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>

When I inspect the results from Firefox the title objects appears identical to the title generated from the HTML/SVG, except that when I mouse over the rectangle there is no tooltip! What am I doing wrong?

回答1:

The title element should be in the SVG namespace, not the default namespace. Therefore, you should use createElementNS(). Also, the SVG title element does not have the text property. Use textContent instead. So, this should work:

<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>

来源：https://stackoverflow.com/questions/13546118/how-to-get-javascript-generated-title-tooltip-for-svg-to-show-up

标签

javascript

svg

tooltip