How to have eCharts tooltip fully visible in the page with Bootstrap

I was trying to implement a Bootstrap 5.x design for some eCharts graphs.

But the tooltip goes out of the page and only part of it is visible.

The code it’s too long to put in stackoverflow snippet so I made a Jsfiddle as example.

See this:

the chart it’s included in a div tag like this:

<div id="A" style="width: 100%; height: 100px; background-color: rgb(102, 102, 102);">
  <div id="mainchart" style="width: 100%; height: 100%;">
    
  </div>
</div>

So the question it’s:

How to have eCharts tooltip fully visible in the page with Bootstrap?