realph realph - 1 year ago 115
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

on the node, it fires the
method, I can never actually hover over the tooltip.

I think I need a way to
the tooltip element so I can fire the
method, like so:

tip.on('mouseover', function(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 Source

Here's the result:

     .on('mouseover', function(d) {   ".d3-tip").transition().style("opacity", "1");;
     .on('mouseout', function(d) {".d3-tip").transition().duration(1000).style("opacity", "0").each("end", tip.hide);
     });".d3-tip").on('mouseover', function(d) {".d3-tip").transition().style("opacity", "1");
     }).on('mouseout', function(d) {".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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download