Need to adjust tooltip perfectly for smaller fields

Hi,
we are using tool tip for the smaller fields and we are adjusting this tool tip position manually, we want to adjust the tool tip position dynamically, tool tip position is not proper when there is long text

To adjust the position of the tool tip, we are using this below approach

Code
const hoverElement = options.htmlElement;
     hoverElement.addEventListener("mouseover", (event: MouseEvent) => {
       const target = event.target as HTMLElement;
       console.log('target:',target);

       if(target.classList.contains('sd-input') || target.classList.contains('sd-dropdown')){
         const currentText = target.innerText || target.getAttribute('value');
         if (!currentText) return
         this.popupText = currentText && currentText.trim();
             const { left , top , width } = event.target['getBoundingClientRect']();
             const tooltipWidth = 1036;
             const tooltipLeft = left + width / 2 - tooltipWidth / 2;
             const tooltipTop = top - 42.00;
             this.popupPosition = {
               top: `${tooltipTop}px`,
               left: `${tooltipLeft}px`
             }
             this.toolShowPopup = true;
             this.cdRef.detectChanges();
       }
     });

Code
<ng-container  *ngIf="toolShowPopup">
  <div class="onHoverTooltip" [ngStyle]="{ 'left': popupPosition.left, 'top': popupPosition.top }">
    <span class="tooltip-text">{{ popupText }}</span>
    <span class="beak beak_top"></span>
    </div>
</ng-container>

Please tell me the best approach to achieve this

Thanks,
Surya