Prevent tooltips from floating off the page

do any of you have a solution on how I can make the tooltips not flow off the page? I have a problem with this especially on mobile, where setting .lib-tooltip(left) makes the element flow out of the page for me. The tooltip elements in my code are often in different places (more in the middle of the page), making it hard to embrace with styles. I tried to write something myself, but it works on average.

Below is the script I tried to use, but unfortunately the tooltip flashes, and it doesn’t work very well when there is no space on the left side (even 1px) then it throws it on the other side of the tooltip, which also often throws it off the page only on the other side of the page.

define([
    'jquery'
], function ($) {
    'use strict';
    
    $(document).ready(function () {
        const tooltips = [...document.querySelectorAll('.tooltip-toggle')];

        tooltips.forEach(tooltip => {
            const adjustTooltipPosition = () => {
                const tooltipBox = tooltip.closest('.tooltip').querySelector('.tooltip-content');
                if (!tooltipBox) return;


                const rect = tooltipBox.getBoundingClientRect();

                if (rect.right > window.innerWidth) {
                    tooltipBox.style.left = `-${rect.right - window.innerWidth + 10}px`;
                }

                if (rect.left < 0) {
                    tooltipBox.style.left = `${Math.abs(rect.left) + 10}px`;
                }
            };

            tooltip.addEventListener('mouseenter', adjustTooltipPosition);
            tooltip.addEventListener('touchstart', adjustTooltipPosition);
            tooltip.addEventListener('click', adjustTooltipPosition);
        });
    });
});