How to add tooltip to an svg graphics element using javascript

Question

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

Answer 1

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");

Answer 2

I fixed my problem with the help of Paul LeBeau answer:

Here is the screen-shot

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")  
        });