React Bootstrap 工具提示无法在全屏上运行答案

【问题标题】：React Bootstrap Tooltip is not working on full screenReact Bootstrap 工具提示无法在全屏上运行
【发布时间】：2020-06-01 09:05:27
【问题描述】：

我使用了 React Bootstrap React Bootstrap Tooltip and OverlayTrigger 附带的“工具提示”标签。代码运行良好。但是，当我的应用程序变为全屏时，我不再看到工具提示。我正在使用 React 和 React Bootstrap。

这是使应用全屏显示的代码

if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) { /* Firefox */
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
            elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) { /* IE/Edge */
            elem.msRequestFullscreen();
        }

这是我的工具提示

<OverlayTrigger
                    placement="top"
                    delay={{show: 250, hide: 400}}
                    overlay={DisplayTooltip(this.props)}>
                    <button onClick={(evt) => {
                        this.itemOnClick(evt)
                    }}>
                        {
                        <img src={this.props.icon} />
                    </button>
                </OverlayTrigger>

还有工具提示：

const DisplayTooltip = (props) => {
    return (
        <Tooltip id={props.tooltip_type + "button-tooltip"} {...props} appendTo>{props.tooltip_type}</Tooltip>
    );
}

非常感谢

【问题讨论】：

标签： reactjs tooltip fullscreen react-bootstrap

【解决方案1】：

嗯，我的同事找到了一个很好的解决方案，可以解决全屏问题。现在工具提示工作正常

解决办法是：

if (document.body.requestFullscreen) {
   document.body.requestFullscreen();
} else if (document.body.mozRequestFullScreen) { /* Firefox */
  document.body.mozRequestFullScreen();
} else if (document.body.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
  document.body.webkitRequestFullscreen();
} else if (document.body.msRequestFullscreen) { /* IE/Edge */
  document.body.msRequestFullscreen();
}

【讨论】：