Reputation: 14021
I have a chart of d3.parcoords and want to add tooltip for first axis of chart. I'm retrieving first axis DOM element and adding title property to it to make it as its tooltip. No success!
Image of UI
Here is code:
var segmentAxis = self.pcz.svg.selectAll(".dimension .axis")[0][0];
segmentAxis.title="Tooltip";
Upvotes: 0
Views: 385
Reputation: 101966
As Robert said, SVG doesn't use title
attributes. It has a <title>
element instead.
https://www.w3.org/TR/SVG11/single-page.html#struct-DescriptionAndTitleElements
If you want to add a tooltip to an SVG group, you'll need to create a <title>
element for your group.
<g>
<title>Your tooltip here</title>
... other elements...
</g>
The D3 code will look something like this:
d3.selectAll('.dimension .axis')[0].append("svg:title").text("Your tooltip here");
Upvotes: 3
Reputation: 14021
I fixed my problem with the help of Paul LeBeau answer:
Here is the Code:
var toolTip=d3.select("#dvAllProfiles").select("svg")
.append("svg:title")
.attr("class", "tooltip")
.style("visibility", "hidden")
.text("Test Tooltip");
self.pcz.svg.selectAll(".dimension").data([0]).selectAll(".tick")
.selectAll("*")
.style("font-size", "12px").style("transform", "rotate(340deg)")
.on("mouseover", function(d) {
return toolTip.style("visibility", "visible").style("top", event.pageY+"px").style("left",event.pageX+"px").text(d);
})
.on("mouseleave", function(d) {
return toolTip.style("visibility", "hidden")
});
Upvotes: 0