如何解决Chakra UI的Tooltip标签内按钮无法点击的问题？

问题原因 #

你使用的Chakra UI Tooltip默认会给Tooltip容器设置pointer-events: none，目的是让鼠标事件穿透到下方的触发元素，但这会导致Tooltip内部的交互元素（比如按钮）无法响应点击、悬停等事件，自然也不会显示指针光标。

修复步骤 #

1. 给Tooltip添加pointerEvents属性
   在Tooltip组件上加上pointerEvents="auto"，允许Tooltip内部元素接收鼠标事件，同时移除Tooltip上不必要的onClick（点击逻辑应该由内部按钮处理）：

   <Tooltip
     closeDelay={5000}
     openDelay={500}
     pointerEvents="auto" // 新增这行，开启内部元素交互
     label={/* ... 你的内容 ... */}
     bgColor="#202020"
     hasArrow
     p={15}
   >
     {/* 触发元素 */}
   </Tooltip>
   

2. 修正代码语法错误
   你的JSX里存在语法错误：<Flex标签闭合前多了无效的your 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> {/* 修正此处的语法错误 */}
   

3. 确保交互样式正常
   按钮默认应该自带cursor: pointer样式，如果仍不显示，可以手动给按钮添加cursor="pointer"属性，避免父元素样式覆盖：

   <Button 
     colorScheme="teal" 
     onClick={() => handleEditGrade(index)}
     cursor="pointer"
   >
     Edit
   </Button>
   

替代Tooltip库推荐 #

如果Chakra UI的Tooltip无法满足需求，这些库原生支持交互内容：

• React Tooltip：轻量易用，默认支持内部元素交互，配置灵活
• Material UI Tooltip：配合MUI生态，内置interactive属性一键开启交互支持
• Floating UI：底层交互库，完全自定义Tooltip的行为、样式和交互逻辑，灵活性拉满

内容的提问来源于stack exchange，提问作者pablo scyzoryk