How do I move tooltip text on a link?

Question

I am quite a beginner with D3. Currently I am working on a network graph without force. Now I have a problem with showing tooltips when hovering over a link. The desired text shows up, but is always in the upper left corner.

This is how I create the links so far:

        rect.data.links = [
            {"source":0,"target":1, "distance":100, "weight": 4, "color" : "black"},
            {"source":1,"target":2, "distance":100, "weight": 12, "color" : "black"},
            {"source":1,"target":3, "distance":100, "weight": 4, "color" : "black"},
            {"source":2,"target":0, "distance": 100, "weight": 9, "color" : "black"},
            {"source":2,"target":4, "distance": 100, "weight": 6, "color" : "black"},
            {"source":0,"target":4, "distance": 100, "weight": 12, "color" : "black"},
            {"source":3,"target":0, "distance": 100, "weight": 12, "color" : "black"},
            {"source":3,"target":2, "distance": 100, "weight": 9, "color" : "black"}

        ];

        // Initialize the links
        var links = rect.svg
            .selectAll("line")
            .data(rect.data.links)
            .enter()
            .append("svg:g")
            .attr("class", "link");

        links
            .append("line")
            .attr("x1", function(l) {
                var sourceNode = rect.data.nodes.filter(function(d, i) {
                    return i == l.source
                })[0];
                d3.select(this).attr("y1", sourceNode.y);
                return sourceNode.x
            })
            .attr("x2", function(l) {
                var targetNode = rect.data.nodes.filter(function(d, i) {
                    return i == l.target
                })[0];
                d3.select(this).attr("y2", targetNode.y);
                return targetNode.x
            })
            .style('stroke', function (d) {
                return d.color;
                }
            )
            .style('stroke-width', function(d) {
                return Math.sqrt(d.weight);
            })
            .on("mouseover", function() {
                return tooltip_links.style("visibility", "visible");})
            .on("mouseout", function() {
                return tooltip_links.style("visibility", "hidden");
            });


        // create a tooltip with keywords
        var keywords = links
        .append("foreignObject")
            .data(rect.data.links)
            .attr("width", "170px")
            .attr("height", "75px")
            .attr("x", d => ((d.source.x + d.target.x) / 2))
            .attr("y", d => ((d.source.y + d.target.y) / 2));


        // create a tooltip
        var tooltip_links = keywords
            .append("xhtml:div")
            .style("position", "absolute")
            .style("visibility", "visible")
            .text("Lorem ipsum");

This is a fiddle: https://jsfiddle.net/9facu458/

How can I force the link tooltip to be on the link?

Answer 1

You can try this (will work for D3 v3/v4):

tooltip_links
  .style('left', `${d3.event.offsetX}px`)
  .style('top', `${d3.event.offsetY}px`)
  .style('visibility', 'visible');

Note that your fiddle gets stuck all the time, please fix it.

UPDATE: For D3 v6, use:

tooltip_links
  .style('left', e => `${e.offsetX}px`)
  .style('top', e => `${e.offsetY}px`)
  .style('visibility', 'visible');