React Bootstrap - OverlayTrigger Tooltip динамически меняет положение в зависимости от вида порта

Question

Я использую OverlayTrigger, Tooltip от реакции-начальной загрузки и хочу изменить положение всплывающей подсказки в зависимости от области просмотра. Сейчас я использую placement по умолчанию, но когда я тестирую его на iPhone X (375 пикселей), он не работает, я полагаю, из-за нехватки места для рендеринга. Как сделать это для автоматического обновления на маленьком экране?

Для LONGTextLon не работает:

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>
    );
};

Текущее состояние: не меняет положение при автоматическом подсчете, когда нет места. Ожидается: перевернуть или изменитьположение «внизу» зависит от области просмотра или пространства

Answer 1

Попробуйте изменить размер события.

window.addEventListener('resize', () => {
    // Check for the size of the window and re render
});