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

Posted 2023-02-25

【中文标题】React Bootstrap 工具提示无法在全屏上运行

【英文标题】：React Bootstrap Tooltip is not working on full screen

【发布时间】：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>
    );

非常感谢

【参考方案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();