D3 heatmap tooltip bug ~ On mouseover the cursor changes to text cursor icon

Question

Heatmap Cursor Error

Heatmap Cursor Correct

The first link shows what happens to the cursor on mouseover, this only happens sometimes and not on the whole area of the box. The second link is what should be happening. I'm not sure my error or why this may be happening. I thought it could have to do with selecting body in the tooltip, but when I select the chart id ("#chart_svg") the tooltip doesnt display at all on mouseover. Below is my code for the tooltip on the d3 heatmap. Has anyone run into this issue or have an idea what may be happening?

For reference I am building this on an AngularJS app in its own component file. The html just displays the component in its whole.

Thank you!

// create a tooltip
const tooltip = d3
  .select('body')
  .append('div')
  .attr('class', 'tooltip')
  .style('background-color', 'white')
  .style('border', 'solid')
  .style('text-align', 'center')
  .style('border-width', '2px')
  .style('border-radius', '2px')
  .style('padding', '2px')
  .style('position', 'absolute')
  .style('z-index', '1000')
  .style('font-size', '10px');

const mouseover = function (this: any, event: any, d: any) {
  tooltip.style('opacity', 1);
  d3.select(this).style('stroke', 'white').style('opacity', 0.8);
};
const mousemove = function (event: any, d: any) {
  tooltip
    .text(d.value + ' : ' + d.blockCount)
    .style('left', event.x + 10 + 'px')
    .style('top', event.y + 10 + 'px')
    .style('stroke', 'black');
};
const mouseleave = function (this: any, event: any, d: any) {
  tooltip.style('opacity', 0);
  d3.select(this).style('stroke', 'none').style('opacity', 0.8);
};
.on('mouseover', mouseover)
.on('mousemove', mousemove)
.on('mouseleave', mouseleave);