2 Replies - 279 Views - Last Post: 29 September 2019 - 12:23 PM

#1 Splashsky   User is offline

  • D.I.C Regular
  • member icon

Reputation: 12
  • View blog
  • Posts: 354
  • Joined: 25-August 13

Tooltip Position Flicker

Posted 27 September 2019 - 05:32 AM

Howdy! Writing a pure JS tooltip library and have made it work really, really well. No big bells and whistles, just a super lightweight super utilitarian easy-to-customize tooltip. That said, I'm having an issue with updating the position; specifically when the tooltip is detected to be out of bounds.

Here's where I do all the checks and decisions to actually update the tooltip's position.
    updateTooltip(event) {
        // Where's our mouse?
        const mouseX = event.pageX,
            mouseY = event.pageY;
        
        // We'll set our default position adjustment to 15.
        const adjustment = 15;

        // The user may have defined their own desired position
        // for the tooltip; let's check!
        let position = (this.element.getAttribute(this.selector + '-pos') || '').split(' ');

        // If we don't have at least two positions, we'll set it to the default.
        if (position.length !== 2) position = [ 'bottom', 'right' ];

        // Now, we need to see if the element is out of our viewport's bounds
        // and adjust the position from there!
        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's instantiate our position variables!
        let vertical, horizontal;

        // Now, we'll set the vertical adjustment. This comes from the first
        // item from the position array.
        switch (position[0]) {
            case 'top':
                vertical = -adjustment - this.tooltip.offsetHeight;
                break;
            case 'center':
                vertical = 0 - (this.tooltip.offsetHeight / 2);
                break;
            default:
                vertical = adjustment;
        }

        // Next, horizontal positioning coming to ya from the second
        // entry in the position array!
        switch (position[1]) {
            case 'left':
                horizontal = -adjustment - this.tooltip.offsetWidth;
                break;
            case 'center':
                horizontal = 0 - (this.tooltip.offsetWidth / 2);
                break;
            default:
                horizontal = adjustment;
        }

        // Now, we use the almight power of absolute positioning to
        // move that there tooltip.
        this.tooltip.style.top  = mouseY + vertical   + 'px';
        this.tooltip.style.left = mouseX + horizontal + 'px';
    }



And here's the function that checks the tooltip's boundaries.
    checkBounds() {
        // If we don't have a tooltip, stop here
        if (!this.tooltip) return;

        // Let's get the boundaries of our tooltip
        const bounds = this.tooltip.getBoundingClientRect();

        // Now, we'll do a bunch of boundary checks and return an
        // array containing what we found
        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;
    }



And it works! It does. Issue is that when I'm hovered over the target element, which is against the right side of the page which causes the tooltip to be out of bounds, it will flicker between the default bottom-right position and the correct bottom-left position. I'm not sure what assumptions to make here, but I'll let you guys be the judge of it.

EDIT: Upon further inspection, it seems to only register out of bounds on every other hair I move the cursor. For instance, when I enter the element, it will display properly; move the cursor a hair in any direction and it will seemingly reset to bottom-right, not seeing that it's out of bounds. Move it one hair further and it will figure out it's out of bounds again, correcting itself to bottom-left.

This post has been edited by Splashsky: 27 September 2019 - 06:02 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Tooltip Position Flicker

#2 Splashsky   User is offline

  • D.I.C Regular
  • member icon

Reputation: 12
  • View blog
  • Posts: 354
  • Joined: 25-August 13

Re: Tooltip Position Flicker

Posted 28 September 2019 - 04:42 PM

Did I ask my question incorrectly?
Was This Post Helpful? 0
  • +
  • -

#3 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15439
  • View blog
  • Posts: 61,862
  • Joined: 12-June 08

Re: Tooltip Position Flicker

Posted 29 September 2019 - 12:23 PM

Got this in a jsfiddle or something folk can test?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1