React Bootstrap 工具提示无法全屏显示
React Bootstrap Tooltip is not working on full screen
我用过React自带的"Tooltip"标签BootstrapReact 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>
);
}
非常感谢
嗯,我的同事找到了一个很好的解决全屏问题的方法。现在工具提示工作正常
解决方法是:
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();
}
我用过React自带的"Tooltip"标签BootstrapReact 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>
);
}
非常感谢
嗯,我的同事找到了一个很好的解决全屏问题的方法。现在工具提示工作正常
解决方法是:
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();
}