Why can there be dead zones on an SVG element for a mouse event?

Question

JavaScript

There is a graph on d3.js and events are set on it for elements:

var tooltip = d3.select('body').append('div')
            .style('position', 'absolute')
            .style('background', '#fff')
            .style('padding', '8 21px')
            .style('border', '2px rgba(0, 0, 0, 0.74) solid')
            .style('border-radius', '5px')
            .style('opacity', '0')
            .style('font-size', 'x-large');

//Курсор становится рукой
.attr("class", function(d){
                if(d.name=='Other')return 'hand';

.on('mouseover', function(d){
                tooltip.transition().duration(500)
                    .style('opacity', 0.9);

                tooltip.html(d)
                    .style('left', (d3.event.pageX +'px'))
                    .style('top', (d3.event.pageY+'px'))
                    .html(function() {
                        return "<strong>" +d.name + "</strong> <span style='color:red'>" + d.number + "</span>"
                    });

                d3.select(this)
                    .style('opacity', 0.5)
            })
            .on('mouseout', function(){
                tooltip.transition().duration(200)
                    .style('opacity', 0);

                d3.select(this)
                    .style('opacity', 1)
            });

Everything works, but at some moments the mouse does not respond to the event properly, the cursor becomes like for working with text or just remains normal. Such blind spots.
Who faced and how to win?

Answer 1

The riddle is solved, the cursor hit the invisible tooltip and did not react to the block itself. Added shift to position and everything is ok

tooltip.html(d)
                    .style('left', ((d3.event.pageX+40) +'px'))
                    .style('top', ((d3.event.pageY-40)+'px'))

Answer 2

Put the SVG in some block, and catch the events of this block. Then there will be no "dead zones"