I have a d3 pie chart that displays a tooltip on hover. I need to have a link in the tooltip box, but the box disappears once the cursor leaves the pie chart. How can i modify the mouseover/mouseout function to stay open when the cursor is inside?
.on('mouseover', function (d) {
$("#tooltip")
.html(d.data.label)
.stop(true).fadeTo(800, 1);
})
.on('mouseout', function (d) {
$("#tooltip").fadeOut(900, 0);
});
here is my fiddle
That's tricky. Normally, you just set pointer-events:none; on the tooltip in CSS, so that it doesn't block the mouse events from getting to the element below. But if you do that, then your link won't work!
I'm assuming that your eventual intention is to have the tooltip display over top of or immediately adjacent to the pie chart. If so, this answer is relevant for getting your positioning right.
One option would be to the add mouseover/mouseout functions to the tooltip as well, so that a mouseover on the tooltip triggers it's own visibility, and mouseout starts the transitions for it to fade away -- but only if that mouse doesn't immediately trigger a mouseover fading it back in again!
I'm not an expert on JQuery, but if their transitions work the same as D3 transitions, then the "fade in" transition as you move from SVG to tooltip should cancel out the just-started "fade out" transition so the user doesn't notice. Just make sure the transition or delay on the fade out is reasonably long for the user to move from one element to the other.
If you want the pop-up to be in the corner, I don't see how you can do that and also have it fade out after the mouse moves off the pie chart. Not without driving your users crazy, anyway.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments