D3 Tooltips Not Showing Up

Start exploring D3 for some of my work.Try to add tooltips to a network graph by d3, but after searching around and tried different solutions, it still refused to show up ... desc:

Solution 1:

You have a couple of issues in your code. First, you set the visibility to hidden, but you never set it to visible in the mouseover. Besides that, you set the opacity to 0, but never changed it in the mouseover as well. Finally, the most important thing: you never set the text to show up in the tooltip.

You just need to set one of those for the tooltip to show/hide, and set the text with html(). Here is your code changing the opacity:

graph = {
    "nodes":[
        {"name":"1","rating":90,"id":2951},
        {"name":"2","rating":80,"id":654654},
        {"name":"3","rating":80,"id":6546544},
        {"name":"4","rating":1,"id":68987978},
        {"name":"5","rating":1,"id":9878933},
        {"name":"6","rating":1,"id":6161},
        {"name":"7","rating":1,"id":64654},
        {"name":"8","rating":20,"id":354654},
        {"name":"9","rating":50,"id":8494},     
        {"name":"10","rating":1,"id":6846874},
        {"name":"11","rating":1,"id":5487},
        {"name":"12","rating":80,"id":"parfum_kenzo"},
        {"name":"13","rating":1,"id":65465465},
        {"name":"14","rating":90,"id":"jungle_de_kenzo"},
        {"name":"15","rating":20,"id":313514},
        {"name":"16","rating":40,"id":36543614},
        {"name":"17","rating":100,"id":"Yann_YA645"},
        {"name":"18","rating":1,"id":97413},
        {"name":"19","rating":1,"id":97414},
        {"name":"20","rating":100,"id":976431231},
        {"name":"21","rating":1,"id":9416},
        {"name":"22","rating":1,"id":998949},
        {"name":"23","rating":100,"id":984941},
        {"name":"24","rating":100,"id":"99843"},
        {"name":"25","rating":1,"id":94915},
        {"name":"26","rating":1,"id":913134},
        {"name":"27","rating":1,"id":9134371}
    ],
    "links":[
        {"source":6,"target":5,"value":6, "label":"publishedOn"},
        {"source":8,"target":5,"value":6, "label":"publishedOn"},
        {"source":1,"target":7,"value":4, "label":"containsKeyword"},
        {"source":8,"target":10,"value":3, "label":"containsKeyword"},
        {"source":7,"target":14,"value":4, "label":"publishedBy"},
        {"source":8,"target":15,"value":6, "label":"publishedBy"},
        {"source":9,"target":1,"value":6, "label":"depicts"},
        {"source":10,"target":1,"value":6, "label":"depicts"},
        {"source":16,"target":1,"value":6, "label":"manageWebsite"},
        {"source":16,"target":2,"value":5, "label":"manageWebsite"},     
        {"source":16,"target":3,"value":6, "label":"manageWebsite"},
        {"source":16,"target":4,"value":6, "label":"manageWebsite"},
        {"source":19,"target":18,"value":2, "label":"postedOn"},
        {"source":18,"target":1,"value":6, "label":"childOf"},
        {"source":17,"target":19,"value":8, "label":"describes"},
        {"source":18,"target":11,"value":6, "label":"containsKeyword"},
        {"source":17,"target":13,"value":3, "label":"containsKeyword"},
        {"source":20,"target":13,"value":3, "label":"containsKeyword"},
        {"source":20,"target":21,"value":3, "label":"postedOn"},
        {"source":22,"target":20,"value":3, "label":"postedOn"},
        {"source":23,"target":21,"value":3, "label":"manageWebsite"},
        {"source":23,"target":24,"value":3, "label":"manageWebsite"},
        {"source":23,"target":25,"value":3, "label":"manageWebsite"},
        {"source":23,"target":26,"value":3, "label":"manageWebsite"}
    ]
}


var margin = {top: 5, right: 15, bottom: 15, left: 5};
var width = 1865  - margin.left - margin.right,
    height = 933  - margin.top - margin.bottom;

var color = d3.scale.category20();

var force = d3.layout.force()
        .charge(-200)
        .linkDistance(50)
        .size([width - margin.left - margin.right, height - margin.top - margin.bottom]);

var zoom = d3.behavior.zoom() 
        .scaleExtent([0.1, 6]) // how large scale it can be zoomed
        .on("zoom", zoomed);

var drag = d3.behavior.drag()
        .origin(function(d) { return d; })
        .on("dragstart", dragstarted)
        .on("drag", dragged)
        .on("dragend", dragended);

var svg = d3.select("#map").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
        .call(zoom);

var rect = svg.append("rect")
        .attr("width", width)
        .attr("height", height)
        .style("fill", "none")
        .style("pointer-events", "all");

var container = svg.append("g");

var tooltip = d3.select('body').append("div")
        .attr("class", "tooltip");

var tooltipStats = tooltip.append('div')
        .attr('class', 'stats');

/*
d3.json('https://d3js.org/world-50m.v1.json', function(data) {
    container.selectAll('path')
        .data(topojson.feature(data, data.objects.countries).features)
        .enter()
        .append('path')
        .attr('fill', '#5bc0de')
        .attr('stroke', '#1992be')
        .attr('d', path)
});
*/// d3.json('/data_3.json', function(graph) {
                
                force
                    .nodes(graph.nodes)
                    .links(graph.links)
                    .start();
                
      
        
        var link = container.append("g")
            .attr("class", "links")
            .selectAll(".link")
            .data(graph.links)
            .enter().append("line")
            .attr("class", "link")
            .style("stroke-width", function(d) { returnMath.sqrt(d.value); });
 
        var node = container.append("g")
            .attr("class", "nodes")
            .selectAll(".node")
            .data(graph.nodes)
            .enter().append("g")
            .attr("class", "node")
            .attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; })
            .call(drag);

  
        node.append("circle")
            .attr("r", function(d) { return d.weight + 10; })
            .style("fill", function(d) { returncolor(1/d.rating); });
         
                
                force.on("tick", function() {
                    link.attr("x1", function(d) { return d.source.x; })
                        .attr("y1", function(d) { return d.source.y; })
                        .attr("x2", function(d) { return d.target.x; })
                        .attr("y2", function(d) { return d.target.y; });

                    node.attr("transform", function(d) { return"translate(" + d.x + "," + d.y + ")"; });
                });
                
                var linkedByIndex = {};
                graph.links.forEach(function(d) {
                    linkedByIndex[d.source.index + "," + d.target.index] = 1;
                });

                functionisConnected(a, b) {
                    return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index];
                }

        node.on("mouseover", function(d){
                    //alert(JSON.stringify(d))
                       
            tooltipStats.html('<p> Please show up </p>') 

            tooltip.html("I am a tooltip")
            .style("left", (d3.event.pageX + 15) + 'px')
                .style("top", (d3.event.pageY - 30) + 'px')
                .style("opacity", .9)
                .transition()
                .duration(200);

                        node.classed("node-active", function(o) {
                            thisOpacity = isConnected(d, o) ? true : false;
                            this.setAttribute('fill-opacity', thisOpacity);
                            return thisOpacity;
                        });

                        link.classed("link-active", function(o) {
                            return o.source === d || o.target === d ? true : false;
                        });
                        
                        d3.select(this).classed("node-active", true);
                        d3.select(this).select("circle").transition()
                                .duration(750)
                                .attr("r", (d.weight + 10)*1.5);
                         
                    
                   

                })
        
        .on("mouseout", function(d){
 
                        tooltip.style("opacity", 0);
                        
                        node.classed("node-active", false);
                        link.classed("link-active", false);

                        d3.select(this).select("circle").transition()
                                .duration(750)
                                .attr("r", d.weight + 10);
               });
//    });functiondottype(d) {
          d.x = +d.x;
          d.y = +d.y;
          return d;
        }

        functionzoomed() {
          container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
        }

        functiondragstarted(d) {
          d3.event.sourceEvent.stopPropagation();
          
          d3.select(this).classed("dragging", true);
          force.start();
        }

        functiondragged(d) {
          
          d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
          
        }

        functiondragended(d) {
          
          d3.select(this).classed("dragging", false);
        }

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.node-active{
  stroke: #555;
  stroke-width: 1.5px;
}

.link {
  stroke: #555;
  stroke-opacity: .3;
}

.link-active {
  stroke-opacity: 1;
}

.overlay {
  fill: none;
  pointer-events: all;
}


#map{
    width:1865px;
    height:900px;
}

.tooltip {   
  position: absolute;           
  opacity: 0;
  width: 100px;                  
  height: 50px;                 
  padding: 2px;             
  font: 12px sans-serif;        
  background: red;   
  border: 0px;      
  border-radius: 8px;           
  z-index: 50;
  pointer-events: none;         
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js"></script><body><divid="map"></div></body>