css - React Bootstrap - OverlayTrigger 工具提示根据视口(viewport)动态改变位置

Question

我正在使用来自 react-bootstrap 的 OverlayTrigger, Tooltip，并希望根据视口(viewport)更改工具提示位置。我现在使用默认的 placement，但是当我在 iPhone X (375px) 上测试它时，它不起作用，我想是因为没有足够的空间来渲染。如何在小屏幕上自动更新？

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

当前状态:空间不足时不会自动改变位置预期:翻转或将位置更改为“底部”取决于视口(viewport)或空间

Answer 1

尝试调整事件大小。

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