Accepted answer

As Robert said, SVG doesn't use title attributes. It has a <title> element instead.

If you want to add a tooltip to an SVG group, you'll need to create a <title> element for your group.

  <title>Your tooltip here</title>
  ... other elements...

The D3 code will look something like this:

d3.selectAll('.dimension .axis')[0].append("svg:title").text("Your tooltip here");


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:

        .attr("class", "tooltip")
        .style("visibility", "hidden")
        .text("Test Tooltip");

        .style("font-size", "12px").style("transform", "rotate(340deg)")
        .on("mouseover", function(d) {
            return"visibility", "visible").style("top", event.pageY+"px").style("left",event.pageX+"px").text(d);
        .on("mouseleave", function(d) {
            return"visibility", "hidden")  

Related Query