realph realph - 6 months ago 46
Javascript Question

D3: Keep mouseover Open While Mouse is Over Tooltip

I'm using d3-tip for tooltips on my graph. And am trying to work out if there's an easy way to keep the tooltips open for a brief period of time?

Once I

mouseout
on the node, it fires the
.hide()
method, I can never actually hover over the tooltip.

I think I need a way to
mouseover
the tooltip element so I can fire the
.show()
method, like so:

tip.on('mouseover', function(d) {
tip.show(d);
}


But I'm not sure how to do this...

I've set up a JSFiddle here.

Any ideas if this is possible?

Thanks in advance!

Answer

Here's the result: http://jsfiddle.net/hx8pjwdu/9/

     .on('mouseover', function(d) {     
       d3.select(".d3-tip").transition().style("opacity", "1");
       tip.show(d);
     })
     .on('mouseout', function(d) {
       d3.select(".d3-tip").transition().duration(1000).style("opacity", "0").each("end", tip.hide);
     });
  d3.select(".d3-tip").on('mouseover', function(d) {
       d3.select(".d3-tip").transition().style("opacity", "1");
     }).on('mouseout', function(d) {
       d3.select(".d3-tip").transition().duration(1000).style("opacity", "0").each("end", tip.hide);
     });

I added a mouseover event for your d3-tip and made its hide event a fadeout.