This stacking can create problems when you have overlapping elements that might not be visible all the time.
Example: A tooltip g
or rect
that has an opacity: 0
that should only appear when hovering over a certain part of your visualization. The part where the tooltip is will catch the mouseover
(and other) mouse events blocking an area of your visualization.
You can avoid this behavior by setting pointer-events="none"
on your tooltip object like so: tooltip.attr('pointer-events', 'none')
.