score:3

Accepted answer

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

score:0

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

Here is the screen-shot Here is the UI of solution

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

Related Query