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. /

      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')
      });

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/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')
      });

• javascript
• d3.js
• tooltip
• transition

Share Improve this question Follow edited Jun 25, 2014 at 20:05 kellyh asked Jun 24, 2014 at 22:07 kellyhkellyh 11322 silver badges88 bronze badges 1

• maybe set height and width to 0 instead of opacity to 0? i couldn't see the issue in the fiddle. – Union find Commented Jun 25, 2014 at 2:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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')
      });

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.