Fix tooltip to selection, don't move when scrolling

Question

I use popper.js to attach a tooltip to a text selection.

function generateGetBoundingClientRect(rangeRect) {
    return () => ({
        width: rangeRect.width,
        height: rangeRect.height,
        top: rangeRect.top,
        right: rangeRect.right,
        bottom: rangeRect.bottom,
        left: rangeRect.left,
    });
}

const range = document.getSelection().getRangeAt(0)

const positionElement = {
    getBoundingClientRect: this.generateGetBoundingClientRect(range.getBoundingClientRect()),
    };

const instance = createPopper(positionElement, menu, {placement: 'top'});

Unfortunately, the so-created menu is not fixed to the selection but scrolls with the viewport. As this is achieved by translate(), I assume there is an option in popper.js to turn that of?

score 2 · Answer 1 · answered Feb 25 '21 at 10:38

The answer was fairly obvious and – to the credit of the popper.js team – in the documentation.

The solution is to turn of listening to scroll events, which can be achieved by passing the eventListener modifier and set scroll:false. In code:

const instance = createPopper(positionElement, menu, {
            placement: 'top',
            modifiers: [
                {
                    name: 'eventListeners',
                    options: {scroll: false}
                }
            ],
        });

Fix tooltip to selection, don't move when scrolling

1 Answers1