Antd Popover doesnt work with react-full-screen - reactjs

Question

import "./styles.css";
import { Popover } from "antd";
import { FullScreen, useFullScreenHandle } from "react-full-screen";
export default function App() {
const handle = useFullScreenHandle();
return (
<div className="App">
<FullScreen handle={handle}>
<div className="App__inner">
<h1>Hello CodeSandbox</h1>
<button onClick={handle.enter}>Click to FullScreen</button>
<Popover placement="right" content={<span>tooltip</span>}>
<button>hover me</button>
</Popover>
</div>
</FullScreen>
</div>
);
}
The problem is Popover doesnt work when i make App__inner component fullscreen. I have reproduced the issue here codesandbox. Please suggest any fix or alternatives
I was expecting the Popover to work as expected in fullscreen mode

Answer 1

The default behavior of Popover is to create a div element in body , so when you do fullscreen the div is hidden. What you need to do is make use of getPopupContainer API of Popover and set the container body inside FullScreen for your Popover to be visible.
import "./styles.css";
import React from "react"
import { Popover } from "antd";
import { FullScreen, useFullScreenHandle } from "react-full-screen";
export default function App() {
const handle = useFullScreenHandle();
const containerRef = React.useRef(null);
return (
<div className="App" >
<FullScreen handle={handle}>
<div className="App__inner" ref={containerRef}>
<h1>Hello CodeSandbox</h1>
<button onClick={handle.enter}>Click to FullScreen</button>
<Popover getPopupContainer={() => containerRef.current} placement="right" content={<span>tooltip</span>}>
<button>hover me</button>
</Popover>
</div>
</FullScreen>
</div>
);
}