10

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?

TessellatingHeckler
  • 27,511
  • 4
  • 48
  • 87
Michael
  • 9,060
  • 14
  • 61
  • 123

1 Answers1

21

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>
Thomas W
  • 14,757
  • 6
  • 48
  • 67
  • @codenamezero You mean like ``, or do you mean a title in an element referenced by use? In both cases: Just try it and feel free to report back about your findings. – Thomas W Apr 24 '15 at 14:35
  • 1
    Yeah, `` is that the right way to do it because I am not getting the title to show up? – codenamezero Apr 24 '15 at 19:00
  • @AnkurMarwaha Of course. Just put the title element inside whatever element you want the tooltip for. – Thomas W Apr 10 '19 at 13:36