So I have a tooltip. This should describe the headers of a CARBON/REACT-table
import { useState } from "react";
import { Popover, PopoverContent } from "@carbon/react";
type TooltipProps = {
id: number;
align?: string;
className?: string;
children?: any;
definition: string;
};
export function TableTooltip({
id,
align,
className,
definition,
children,
}: TooltipProps) {
const [isOpen, setOpen] = useState(false);
function onKeyDown(event: React.KeyboardEvent) {
if (isOpen && event.key === "Escape") {
console.log("escaped");
event.stopPropagation();
setOpen(false);
}
}
return (
<Popover
id={"po" + id}
align={"bottom"}
className={className}
dropShadow={false}
highContrast
onMouseLeave={() => {
setOpen(false);
}}
onMouseEnter={() => {
setOpen(true);
}}
open={isOpen}
>
<div
className={"cds--definition-term"}
aria-controls={`${id}`}
aria-expanded={isOpen}
onBlur={() => setOpen(false)}
onKeyDown={onKeyDown}
>
{children}
</div>
<PopoverContent className={`custom-table-tooltip`} id={id + "tooltip"}>
{definition}
</PopoverContent>
</Popover>
);
}
But like you see in the image, it gets clipped.
I tried appending to <body> or setting zIndex. I tried to follow this issue-page (which I presume is a similar problem). With no success. I need to avoid using other libraries.
Fixed it by implementing the library (floating-ui) that they consider using themselves. Not at all happy with the fix, since I didn't want to use external libraries, but it was the quickest fix and the library is pretty easy and straightforward.