StackedBar Chart With Missing ToolTip In Angular And D3.js

I have adapted this example to work with the latest Angular and D3. It works fine (after a little hack) but I do not get the tooltips when hovering, etc...

Stacked Bar C

Solution 1:

It turns out it was working all along, though due to other app components, the position was far off, so it would show at the top of the page where I would not be able to see it.

I modified the page x and y values as follows to get it to show above the mouse pointer:

const mousemove = function (event, d) {
      tooltip.style("transform", "translateY(-55%)")
        .style("left", (event.x - 50) + "px")
        .style("top", (event.y + 450) + "px");
}

My question about positioning still remains: How do I make this part show just above the mouse pointer regardless, by modifying the existing code?