Auto-position arrow

[satazor]

When overflow.adjustX and/or overflow.adjustY is true, then the box was auto-adjusted to not go offscreen. In those cases, I expected the arrow to be positioned accordingly.

In the screenshot below, the arrow position should be pointing to the deprecated flag.

[satazor]

I've managed to solve this with onPopupAlign:

// ./util/placeArrow.js

import positions from 'positions';

const placementsMap = {
    tc: 'top center',
    bc: 'bottom center',
    cl: 'center right',
    cr: 'center left',
};

export default function placeArrow(tooltipEl, align) {
    const arrowEl = tooltipEl.querySelector('.tooltip-component-arrow');
    const targetEl = this.getRootDomNode();  // eslint-disable-line no-invalid-this

    const position = positions(arrowEl, placementsMap[align.points[0]], targetEl, placementsMap[align.points[1]]);

    if (align.points[0] === 'tc' || align.points[0] === 'bc') {
        arrowEl.style.top = '';
        arrowEl.style.left = `${position.left}px`;
    } else {
        arrowEl.style.top = `${position.top}px`;
        arrowEl.style.left = '';
    }
}

then just set the onPopupAlign to placeArrow. Also note that you need to install positions module.

Anyway I would love to have this built in.

[jpalala]

Can we have this built in? It looks awesome!

[royshouvik]

If the above snippet doesn't work for you, try changing .tooltip-component-arrow to .rc-tooltip-arrow

[BenjaminEckardt]

Looks like someone created a PR https://github.com/react-component/tooltip/pull/166

[vicchirino]

@satazor can you give an example of how apply this solution, please? thanks in advance

[satazor]

Hello @vicchirino, check this out: https://github.com/npms-io/npms-www/tree/master/src/shared/components/tooltip. The tooltip component is using utils/placeArrow and utils/checkEdges

[tusharag-19]

Is there any update about this issue being getting resolved?