Мерцание позиционирования подсказки JS - PullRequest
Новая
       34

Мерцание позиционирования подсказки JS

0 голосов
/ 27 сентября 2019

Написание чистой библиотеки всплывающих подсказок JS и заставило ее работать очень, очень хорошо.Никаких больших наворотов, просто суперлегкая, супер утилитарная, легко настраиваемая подсказка.Тем не менее, у меня возникла проблема с обновлением позиции;особенно когда подсказка обнаружена вне границ.

И это работает!Оно делает.Проблема заключается в том, что когда я нахожусь над целевым элементом, который находится напротив правой стороны страницы, из-за чего всплывающая подсказка выходит за границы, она будет мигать между стандартной нижней правой позицией и правильной левой нижней позицией.При дальнейшем осмотре кажется, что на всех остальных волосах, которые я двигаю курсором, регистрируются только границы.Например, когда я ввожу элемент, он будет отображаться правильно;переместите курсор на волосок в любом направлении, и он, по-видимому, вернется в нижний правый угол, не видя, что он находится за пределами границ.Переместите его на один волосок дальше, и он снова обнаружит, что он вышел за границы, исправляя себя внизу слева.Я не уверен, какие предположения сделать здесь, но я позволю вам, ребята, судить об этом. 

    updateTooltip(event) {
        const mouseX = event.pageX,
            mouseY = event.pageY;

        const adjustment = 15;

        let position = (this.element.getAttribute(this.selector + '-pos') || '').split(' ');

        if (position.length !== 2) position = [ 'bottom', 'right' ];

        var isOut = this.checkBounds();
        if (isOut.top)    { position[0] = 'bottom'; }
        if (isOut.left)   { position[1] = 'right'; }
        if (isOut.bottom) { position[0] = 'top'; }
        if (isOut.right)  { position[1] = 'left'; }

        let vertical, horizontal;

        switch (position[0]) {
            case 'top':
                vertical = -adjustment - this.tooltip.offsetHeight;
                break;
            case 'center':
                vertical = 0 - (this.tooltip.offsetHeight / 2);
                break;
            default:
                vertical = adjustment;
        }

        switch (position[1]) {
            case 'left':
                horizontal = -adjustment - this.tooltip.offsetWidth;
                break;
            case 'center':
                horizontal = 0 - (this.tooltip.offsetWidth / 2);
                break;
            default:
                horizontal = adjustment;
        }

        this.tooltip.style.top  = mouseY + vertical   + 'px';
        this.tooltip.style.left = mouseX + horizontal + 'px';
    }

    checkBounds() {
        if (!this.tooltip) return;

        const bounds = this.tooltip.getBoundingClientRect();

        let out = {};
        out.top = bounds.top < 0;
        out.left = bounds.left < 0;
        out.bottom = bounds.bottom > (window.innerHeight || document.documentElement.clientHeight);
        out.right = bounds.right > (window.innerWidth || document.documentElement.clientWidth);
        out.any = out.top || out.left || out.bottom || out.right;
        out.all = out.top && out.left && out.bottom && out.right;

        return out;
    }
...