Show d3.layout.force link tooltip on mouse over

Question

How do I implement tooltips on mouse over for links in a D3 directed graph layout? I'm adapting the D3 force example, so setting up node tooltips was straightforward using code like this:

    node.append("title")
        .text(function(n) {
            return n.id;
        });

Trying a similar technique with the links didn't result in mouse over tool tips:

    var link = svg.selectAll("line.link")
        .data(json.links)
        .enter().append("line")
        .attr("class", "link")
        .style("stroke-width", function(d) {
            return 4;
        });

link.append("title")
    .text(function(n) {
            return n.info;
        });

Answer 1

You can find different solutions suggested by Mike Bostock on this Google Groups thread "show value when click or move mouse over on d3.svg.line"

Answer 2

I think what you are looking for is a combination of these two answers:

d3js: _on()_ doesn't send the current datum object to the onmouse function

and

Adding tooltip to bar chart generated using svg path

Both have jsFiddles you can play with.