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="">
<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="">
<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?
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?
Share Improve this question edited Jun 21, 2015 at 21:17 TessellatingHeckler 29k4 gold badges54 silver badges93 bronze badges asked Nov 24, 2012 at 22:08 MichaelMichael 9,40215 gold badges72 silver badges136 bronze badges1 Answer
Reset to default 22The 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>