It seems to me that, my tooltip is not moving with the mousemove event. Here is my code sample: my tooltip div is looking like that.

<div id="tooltip" class="chart_tooltip"></div>

Now trying to create a tooltip with bellow code sample:

 let tooltip = d3.select('#tooltip');
 let tipBox = g
            .append('rect')
            .attr('width', width)
            .attr('height', height)
            .attr('opacity', 0)
            .on('mousemove', function (event: MouseEvent) {
                 let posX = event.clientX;
                 let posY = event.clientY;

                      tooltip
                        .html('I am a tooltip')
                        .style('display', 'block')
                        .style('left', posX + 'px')
                        .style('right', posY+ 'px')
                        .selectAll()
                        .data([nearDate])
                        .enter()
                        .append('div')
             }

But the problem is that, tooltip is not updating it's position with mousemove event. It stuck at end of my chart not updating it's position on musemoe event. Can someone please tell me how to fix that?