Adding tooltip to bar chart generated using svg pa

Question

how can i add a tooltip to each bar in a barchart generated using svg path... Is it possible to use bootstrap tooltip...? I have provided my svg path below

 <path class="foreground bar" clip-path="url(#clip 0)" d="M36,100V68h20V100M108,100V29h20V100M180,100V71h20V100M252,100V-4h20V100M324,100V87h20V100"/>

I have provided the svg generated barchart in below fiddle http://jsfiddle.net/mfAc4/6/ ... How can i add tooltip to each bar ??

Any suggestions would be appreciated.

Answer 1

Not sure what you mean by bootstrap, but most UAs will turn a title element child into a tooltip. E.g.

<path class="foreground bar" clip-path="url(#clip 0)" d="M36,100V68h20V100M108,100V29h20V100M180,100V71h20V100M252,100V-4h20V100M324,100V87h20V100">
    <title>tooltip text</title>
</path>

Answer 2

Have a look at: http://bl.ocks.org/2973775

Note in your jsFiddle you are not actually using d3. But you can easily add it to get a tooltip see here:

var svg = d3.select("svg").attr("width", 400).attr("height", 400);

var vis = svg.append('g');

var txt = vis.append('text')
    .attr({ transform: 'translate(5,20)', fill:'red'})
    .text("Node Info");

d3.selectAll('.bar')
    .on("mouseover", function(d) { 
        var mousePos = d3.mouse(this);
        txt.text(mousePos);
        txt.attr({transform: 'translate(' + mousePos + ')'});
    })
    .on("mousemove", function(d) { 
        var mousePos = d3.mouse(this);
        txt.attr({transform: 'translate(' + mousePos + ')'}); 
    });

​ To figure out which bar you will have to look at the mouse x position. You should consider using a d3 scale for this (it will map in both directions - check out the invert function).