CODEWITHSUNDEEP
javascriptd3.jssvgcanvastooltip
DevLoverUmar
DevLoverUmar

Reputation: 14021

How to add tooltip to an svg graphics element using javascript

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 the UI

Here is code:

    var segmentAxis = self.pcz.svg.selectAll(".dimension .axis")[0][0];

    segmentAxis.title="Tooltip";

Upvotes: 0

Views: 385

Answers (2)

Paul LeBeau
Paul LeBeau

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

DevLoverUmar
DevLoverUmar

Reputation: 14021

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

Upvotes: 0

Related Questions