Binding Zoom behaviour of d3 orgchart with tooltip class

Question

I have created this d3 orgchart

chart = new d3.OrgChart()
    .container('.chart-container')
    .data(mappedData)
    .nodeWidth((n) => 250)
    .nodeHeight((n) => 120)
    .compact(false)
    .siblingsMargin((d) => 100)
    .nodeContent((d) => //Setting the node contents like - text, image here)
    .setActiveNodeCentered(false)//Making the root node constant
    .render()
    .expandAll()
    .onZoom(() => {  //Managing tooltip size & text size like this with zoom behaviour 
       tooltipDis = tooltipDis + 13
       tooltipText = tooltipText - 1
       tooltipH = tooltipH + 0.1
    });

And I have explicitly created a tooltip class and added it to the ".Chart-container"

//Adding a div element for tooltip
d3.selectAll('.chart-container').append("section")
.attr("class", "tooltip")
.style("opacity", 0);

const node = d3.selectAll(".node");
        
node.on('mouseenter', function (event, d) {
  const nodeRect = this.getBoundingClientRect();
  const tooltipLeft = nodeRect.right;
  const tooltipTop = nodeRect.top - nodeRect.height - tooltipDis;
            
  // Show tooltip
  d3.select('.chart-container').select("section")
    .transition()
    .duration(100)
    .style('opacity', 0.9)
    .style(//Some styling related to tooltip box & text);

// Update tooltip content based on hovered node data
  d3.select('.chart-container').select("section")
    .html(//setting the tooltip content)
        
node.on('mouseleave', function (event, d) {
   // Hide tooltip
   d3.select('.chart-container').select("section")
    .transition()
    .duration(500)
    .style('opacity', 0);
});

Now I want to change the tooltip text & box size, height and width to get changed as per the nodes position whenever we zoom in/out

What I have tried ?

1. Right now I am changing the tooltip box & text size & height with .onZoom function, with some of my estimation I have put the numbers hardcoded and it's working to some extent, but with extreme zoom in/outs or slight drag events it going haywire and numbers are sizes are changing drastically hence going in negatives

2. On the html page I can see the structure is like this -> body -> .chart-container -> .svg-chart-container -> .chart -> .nodes wrapper, .link-wrapper etc.

   Whenever I zoom in/out I saw the transform of the ".chart" class getting changed, so I tried adding the tooltip class to this class itself, but adding is successful, nodes are also getting selected correctly but .transition() doesn't work, so tooltip doesn't appear hence I again changed it to ".chart-container", any class selection below ".chart-container" doesn't work

3. Is there any function where I can get the scale contents of the chart/node specific and then apply it to the respective tooltip classes ?

Stuck in it for a longer time now, can anyone please help ?