0

I'm using OverlayTrigger, Tooltip from react-bootstrap, and want to change tooltip position depending on viewport. I use a default placement right for now, but when I test it on iPhone X (375px), it's not working, I suppose because of not enough space to render. How to do this to automatically update on a small screen?

For LONGTextLon does not work:

const CustomTooltip = ({ placement = 'right', text = null }) => {
    return (
        <OverlayTrigger
            placement={placement}
            popperConfig={{
                modifiers: {
                    // preventOverflow: {
                    //     enabled: true
                    //     // priority: ['top', 'right'],
                    //     // boundariesElement: 'viewport'
                    // }
                }
            }}
            overlay={
                <Tooltip>
                    <div className="tc-text">{text}</div>
                </Tooltip>
            }
        >
                <Icon/>
        </OverlayTrigger>
    );
};

Current state: does not change position automativcaly when not enouph space Expected: flip or change position to 'bottom' depends on viewport or spaceenter image description here

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Palaniichuk Dmytro
  • 2,943
  • 12
  • 36
  • 66

1 Answers1

1

Try the event resize.

window.addEventListener('resize', () => {
    // Check for the size of the window and re render
});
Yoann Picquenot
  • 640
  • 10
  • 26
  • Yes, it could be a solution, but I thinks there are native api that can detect viewport, in that case I need remove event listener and it's not a good from performance perspective – Palaniichuk Dmytro Oct 10 '19 at 15:10