Problems with zooming in HTML using Tooltip and Bootstrap 5

I needed to change the zoom in my CSS to 90%, so the Tooltips completely lost their correct positions in the elements.

To understand better, if you go to the Tooltip website in the Bootstrap 5 documentation and run this script below, you will see that even on that page the Tooltip is in the wrong position, I need help to correct this.

documentation Tooltip

Script to run in the browser console:

  // Destroy the tooltips
  var tooltipList = bootstrap.Tooltip.getInstance(document.body);
  if (tooltipList) {
    tooltipList.dispose();
  }
  // Zoom to 90%
  document.body.style.zoom = '90%';
  // Start tooltips again
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
  tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
  });

Even if I just zoom, the same thing happens.

Here is my CSS, I have already used zoom and transform:scale, both in ‘html’ and ‘body’

html {
  zoom: 0.9; 
  zoom: 90%;
  width: 111.11vw; 
  min-height: 111.11vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}