How to add clickable buttons to Tooltip label in Chakra UI?

Question

So this is what my component returns. Everything looks great, the buttons and everything looks fine in the Tooltip after I hover over Box showing grade. Just the buttons in the tooltip aren't clickable. Hoverting them doesn't even show the pointer cursor. What can I do about this? Is there an other option/ Maybe other tooltip library with such a support? I don't know but it looks dope, would be nice if it also worked. :)

return (
    <Tooltip
      onClick={() => handleDeleteGrade(index)}
      closeDelay={5000}
      openDelay={500}
      label={
        <Flex direction="column" justify="center">
          {" "}
          <Text>Grade: {grade.grade} </Text>{" "}
          <Text>Weight: {grade.weight} </Text>{" "}
          <Text>Comment: {grade.comment ? grade.comment : "-none-"} </Text>{" "}
          <Flex direction="column" gap={3} mt={3}>
            <Button 
             colorScheme="teal" 
             onClick={() => handleEditGrade(index)}>
             Edit
            </Button>
            <Button
              colorScheme="red"
              onClick={() => handleDeleteGrade(index)}
            >
              Delete
            </Button>
          </Flex`your text`>
        </Flex>
      }
      bgColor="#202020"
      hasArrow
      p={15}
    >
      <Box
        _hover={{
          textDecoration: "underline",
        }}
        cursor="pointer"
        key={grade.id}
        p={3}
        borderRadius={2}
      >
        {grade.grade && system.find((g) => g?.grade === grade?.grade)?.name}
      </Box>
    </Tooltip>
  );

So to be honest there is nothing I could try more. I'm expecting my buttons to work as always.

Answer 1

Adding pointerEvents={"all"} to Tooltip should fix it! :)

Codepen: https://codesandbox.io/s/keen-mccarthy-1oejq9?file=/App.tsx