Data Visualization Heat Map: tooltip offset way off after scrolling

Hello,

I’m working on the heat map project for the Data Visualization project and I’m having problems with the tooltip displaying over the cell. It works fine with the cells in the default view, but once I start scrolling, the tooltip offset is way off. I am using the HTML Element method getBoundingClientRect() to get the X and Y positions.

Here is a link: https://codepen.io/tranpeter08/pen/VwrOLem

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.109 Safari/537.36

Challenge: Visualize Data with a Heat Map

Link to the challenge:

Nevermind, I just found out that there is a way to create tool tips with D3