Tooltip in the network graph is flashing on and off

Question

I am creating a tooltip for the network graph in d3js where each node have circle and text.

What I am trying to do is that when user try to mouseover/mouseout on the circle/text the tooltip is getting show/hide accordingly. So when the user mouseover from circle to text the tooltip is flashing on and off and changing the position of the tooltip. This is because that I have given the show/hide event to both the element like this.

circles.on("mouseover", showDetails);
circles.on("mouseout", hideDetails);
text.on("mouseover", showDetails);
text.on("mouseout", hideDetails);

and also when I hover the some nodes the tooltip div will be at the top of the cursor so when I move up the cursor the the mouse pointer will be hover the div and the tooltip is flashed on and off.

Is it possible to combine the text, circle and tooltip div for a particular node as a single element and also to show the tooltip without the frequent changing in the position. Is there any other possibilities to do this?

He is my jsbin link: http://jsbin.com/AkAdeMoK/2

Answer 1

You should use circles.on("mousemove", showDetails);

I alse added css

svg text {
  pointer-events: none;
}

Here is how it looks like now - http://jsbin.com/omaguJO/1