Metronic Column controls and table layout causes tooltip to be see through when hovered over in the DataGrid
i have an issue with the DataGrid components from metronic
when i try to add column controls like drag feature etc i have an issue where on one of the columns im rendering a card inside of a tooltip when hovered over a cell in that column for example
its like a tooltip now when i try to add features like drag column or things like that etc my tooltip card becomes see through or transparent, now ive tried playing around and adding z indexes to tooltip and card both but it doesnt seem to work now when i remove those from the tableLayout etc in DataGrid, the tooltip behaves correctly
why is that ? what am i missing ?
heres the relevant file in my repo: https://github.com/moahnaf11/MCA-Metronic/blob/main/src/pages/archived/archived.tsx
lines 240-323 is the accessorKey for that column with the tooltip
lines 723 is the DataGrid with the props
i would appreciate some help
Thank You
Replies (1)
Hi,
Please try to use below code with proper Portal placement:
<Tooltip>
<TooltipTrigger asChild>
<span className="cursor-pointer">
Test
</span>
</TooltipTrigger>
<Portal>
<TooltipContent
side="right"
sideOffset={20}
className="shadow-lg rounded-md p-0"
>
<Card className="min-w-[500px] rounded-md">
<CardHeader>
<CardHeading>
<CardTitle className="text-lg">Car Details</CardTitle>
</CardHeading>
</CardHeader>
<CardContent>
<p>Test Test Test Test Test Test</p>
<p>Test Test Test Test Test Test</p>
<p>Test Test Test Test Test Test</p>
<p>Test Test Test Test Test Test</p>
<p>Test Test Test Test Test Test</p>
</CardContent>
</Card>
</TooltipContent>
</Portal>
</Tooltip>Tested and worked well.
All the best!
Regards,
Sean
