Problem with Tailwind: overflow-visible and overflow-auto cut content - css

Question

I ran into a problem that if you add a scroll, it does not allow you to show content outside the scope. Preliminary search for a solution shows that it is in principle not possible to implement now?
How it looks
Instead of a tooltip, there can be anything else. If you remove the scroll, then there is no problem, it is also clear how to use "relative" and "absolute". The problem is with the scroll.
My code:
import { Tooltip } from "../tooltips/Tooltip";
function Dialog() {
return (
<>
{/*bg*/}
<div class="fixed inset-0 z-0 bg-white heropattern-topography-slate-400"></div>
{/*dialog*/}
<div class="fixed inset-0 z-0 flex">
<div class=" relative m-auto flex h-96 max-h-full w-4/5 flex-col rounded border bg-purple-400 p-[8px]">
{/*header*/}
<div>Header</div>
{/*content*/}
<div class=" flex overflow-y-auto bg-orange-400">
<div className="">
<div className="z-20">
<Tooltip
// topLeft={true}
bottomRight={true}
text={"It's your tooltip"}
>
<div className="flex w-fit bg-lime-400 p-4 hover:overflow-visible">
tooltip
</div>
</Tooltip>
</div>
content
<br />
content
<br /> content
<Tooltip topRight={true} text={"It's your tooltip"}>
<div className="flex w-fit bg-lime-400 p-4">tooltip</div>
</Tooltip>
content
<br /> content
<br />
content
<br /> content
<br />
content
<br /> content
<br />
content
<br /> content
<br />
content
<br />
</div>
</div>
{/*footer*/}
<div>Footer</div>
</div>
</div>
</>
);
}
export { Dialog };