mouseover not working on g.append('rect')

Hi, Yes according to me I did. Here is the source code for rendering the labels:

        private renderLabel(g, backColor, point, prop,x,y) {
                var div = d3.select("body").append("div")	
                .attr("class", "tooltip")				
                .style("opacity", 0);
        
                // create rectangles for text
                g.append("rect")
                .datum(point)
                .attr("height", 15)
                .attr("width", 25)
                .attr("fill", backColor)
//                .attr('opacity', '.3')
                .attr("transform", function(d){ return "translate("+ (x(<number>d.xAxis)-13) + "," +(y(<number>d[prop])-6)+")"})
                .on("mouseenter", (function(d){
                    div.transition()		
                    .duration(200)		
                    .style("opacity", .9);		
                    div.html("xAxis:"+ d.xAxis + "<br/>"  + "yAxis:" + d[prop])	
                    .style("left", x(d.xAxis) + "px")		
                    .style("top", y(d[prop]) + "px");	
                        
                }))                    
                .on("mouseout", (function(){
                    div.transition()		
                    .duration(500)		
                    .style("opacity", 0);	
                }));                    

                // Add text
                let text= g.append("text")
                .datum(point)
                .attr("x", function(d) { return x(<number>d.xAxis) - 10; })
                .attr("y", function(d) { return y(<number>d[prop]) - 5 })
                .attr("dy", ".70em")
//                .attr("text-anchor", "middle")  
                .style('fill', 'black')
                .text(function(d) { return <number>d[prop]; })
        }

    }