CODEWITHSUNDEEP
javascriptd3.js
Anson Aştepta
Anson Aştepta

Reputation: 1145

D3 Charts : How to add a tooltip?

I am trying to add tooltip for all my nodes included in my tree chart.

    var tooltip = d3.select("body")
        .append("div")
        .style("position", "absolute")
        .style("z-index", "10")
        .style("visibility", "hidden")
        .text("a simple tooltip");

and try to show a tooltip box when the user mouseover() it, but doesn't work and gives no exception.

I have created a demo base on my current stage : http://jsfiddle.net/qvco2Ljy/119/

Upvotes: 0

Views: 67

Answers (2)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

Remove the return and set the x and y positions of the tooltip:

tooltip.style("visibility", "visible")
    .style('top', d3.event.pageY - 6 + 'px')
    .style('left', d3.event.pageX + 10 + 'px');

Don't forget to make it disappear in the mouseout:

tooltip.style("visibility", "hidden")

Here is your updated fiddle: http://jsfiddle.net/dv8cn0xu/

Upvotes: 2

Varad Chemburkar
Varad Chemburkar

Reputation: 478

You can append tooltip to each node as follows

node.append("svg:title")
    .text(function (d) {
        return "Some Text based on Data (d)";
    });

Upvotes: 1

Related Questions