javascript - Hiding a tooltip with transition in d3 -
javascript - Hiding a tooltip with transition in d3 -
i'm new d3 , coding in general, , i'm making social network graph tooltips. tooltip supposed appear when hovers on node , fade out , hide when mouse removed. managed tip fade out transition, tip still there, invisible, box , text obscure other nodes, making can't hover on parts of other nodes , trigger other tooltips. when code node.on('mouseout', tip.hide);
, works fine, doesn't have transitions.
here's fiddle. effect i'm talking doesn't happen there much in 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 original line.
edit:
i figured out. needed add together style didn't know about. here's fixed code:
node.on('mouseout', function() { d3.select(".d3-tip") .transition() .delay(100) .duration(600) .style("opacity",0) .style('pointer-events', 'none') });
i figured out. needed add together pointer-events style. here's 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
Comments
Post a Comment