Temporary alternative to .remove() in D3

Question

I'm working on a project where I append a tooltip to the DOM. When I mouseover an object, the tooltip fades into view. When I leave, the tooltip fades out.

The problem I'm having is, it's still on top of other elements, and thus blocks their mouseover events from firing. Normally, I would just remove the element: d3.select("#theElement").transition().style("opacity",0).remove()

The problem is, I want to be able to re-append it later, upon mouseover. Is there a way to temporarily tack the tooltip somewhere it won't get in the way? Maybe down in the DOM or something? How do most people deal with this problem in D3?

Answer 1

If the issue is that you are blocking mouse over events under the tooltip when it is otherwise invisible, you could set the pointer-events property to none when you need to hide the element (rather than moving the element):

 selection.style("pointer-events","none")

Mouse events will now see through this element and the tooltip won't block other "mouseover events from firing"

If the tooltip doesn't have mouse interaction at all, you could just append the tooltip with pointer-events set to none to start (or use css to achive the same result).

But, if the tooltip has mouse interaction, then you can re-set the pointer events attribute when you need mouse interaction on the tooltip again:

selection.style("pointer-events","all")

Answer 2

You have several options:

1. Set the element's CSS z-index to behind the other elements:

document.getElementById('theElement').style.zIndex = -9999;

2. Set the element's CSS style visibility to hidden:

document.getElementById('theElement').style.visibility = "hidden";

Edit: originally I suggested changing its display style, but apparently not-displayed still generates events.

3. Or set a CSS class that hides the element:

document.getElementById('theElement').className += ' hide';

where your stylesheet has:

.hide: { display: none; visibility: hidden }

or you are using an existing CSS framework that has this class (e.g. Bootstrap).

Should be able to accomplish similar with d3:

d3.select('#theElement').style('z-index', -9999); d3.select('#theElement').style('visibility', 'hidden'); d3.select('#theElement').classed('hide', true);