Tooltip gets hidden in Mantine-React-Table

Question

I have a standard Mantine React Table and I want to add a tooltip to on of the Action Icons and the column headers. However, when I do, they are cut-off by the length of the column. How can I make the tooltip the highest priority? I have tried using the z-index to no avail.

This is my table:


const table = useMantineReactTable({
...
renderRowActions: ({ row }) => (
        <>
        <Tooltip label="Text" position="left" withArrow z-index="9999">
        <Box style={{ display: 'flex', alignItems: 'center', gap: '0px' }}>
          <ActionIcon onClick={(event) => handleViewJSON()}>
            
              <IconJson />
   
          </ActionIcon>
        </Box>
        </Tooltip>
    ),
    ...
}

you can try the withinPortal prop on the tooltip to force it. — Zxeenu
– Zxeenu, Commented Dec 16, 2024 at 10:05

Rohit · Accepted Answer · 2025-01-21 14:05:21Z

0

use it like this worked for me

<Tooltip label="Send Email" position="top" withArrow>
<ActionIcon color="blue" onClick={() => console.log(row.original)}>
<IconSend />
</ActionIcon>
</Tooltip>

edited Jan 21 at 14:05

answered Jan 21 at 14:05

Rohit

11 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Tooltip gets hidden in Mantine-React-Table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related