hope you are all doing good.

I stuck in an issue. I am using plotlyjs for bar charts in which I am using custom tooltip(using hover event to create custom html content). Below you can see:

<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
<div id="custom-tooltip">Custom tooltip</div>

var trace1 = {
  x: ['giraffes', 'orangutans', 'monkeys'],
  y: [20, 14, 23],
  name: 'SF Zoo',
  type: 'bar',
  hoverinfo: 'none'
};

var trace2 = {
  x: ['giraffes', 'orangutans', 'monkeys'],
  y: [12, 18, 29],
  name: 'LA Zoo',
  type: 'bar',
  hoverinfo: 'none'
};

var data = [trace1, trace2];

var layout = {barmode: 'stack', showlegend: false};

Plotly.newPlot('myDiv', data, layout);

var graphElem = document.getElementById('myDiv');
const tooltipElem = document.getElementById('custom-tooltip');

graphElem.on('plotly_hover', function(data){
  const yaxis = data.points[0].yaxis;
    const xaxis = data.points[0].xaxis;
  console.log(data)
    const distY = yaxis.d2p(data.points[0].y) + yaxis._offset + 20; //
    const distX = xaxis.d2p(data.points[0].x) + xaxis._offset - 110;
 
  tooltipElem.innerHtml = '<h3>Custom tooltip</h3>';
  console.log(distX, distY)
  tooltipElem.style.left = distX + "px";
    tooltipElem.style.top = distY + "px";
    tooltipElem.style.display = "block";
  
})
 .on('plotly_unhover', function(data){

});

But I can't find a way to position the custom div at the top of bar whenever hover on any bar.

Codepen

How can i do this?