Hiding a tooltip with transition in d3

Question

I'm new to d3 and coding in general, and I'm making a social network graph with some tooltips. The tooltip is supposed to appear when someone hovers over a node and fade out and hide when the mouse is removed. I managed to get the tip to fade out with a transition, but the tip is actually still there, just invisible, so the box and text sometimes obscure other nodes, making it so that you can't successfully hover over parts of other nodes and trigger other tooltips. When the code is just node.on('mouseout', tip.hide); , it works fine, but it doesn't have the transitions.

Here's the fiddle. The effect I'm talking about doesn't happen there as much as in a normal browser though. http://jsfiddle.net/wPLB5/

      node.on('mouseover', tip.show); 
      node.on('mouseout', function() { 
          d3.select(".d3-tip")
          .transition()
          .delay(100)
          .duration(500)
          .style("opacity",0);
          tip.hide;
         }); 
      //node.on('mouseout', tip.hide); //This is the original line.

Edit:

I figured it out. I needed to add another style that I didn't know about. Here's the fixed code:

  node.on('mouseout', function() {
      d3.select(".d3-tip")
      .transition()
        .delay(100)
        .duration(600)
        .style("opacity",0)
        .style('pointer-events', 'none')
      });

Answer 1

I figured it out. I needed to add a pointer-events style. Here's the fixed code:

  node.on('mouseout', function() {
      d3.select(".d3-tip")
      .transition()
        .delay(100)
        .duration(600)
        .style("opacity",0)
        .style('pointer-events', 'none')
      });

Answer 2

You can try the two approaches using div tooltip or using svg title .

 node.append("svg:title")
   .text(function(d) { return "Location:" + " " + d.location + 
      "\nFloruit Date:" + " " + d.floruitDate; });

Also, maybe this answer will be useful for you D3: show data on mouseover of circle .