Menu
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?
341
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
