Chakra UI中Tooltip嵌套Badge时无法正常显示的问题

以下是几个可行的解决思路及代码示例：

• 给Badge添加tabIndex属性
  让Badge成为可聚焦元素，确保Tooltip能捕获到鼠标悬停事件。只需在Badge组件上添加tabIndex={0}即可：

  <Tooltip
    hasArrow
    label="hi there"
    padding={2}
    width="50px"
    bgColor="gray.1200"
    borderRadius={8}
    py={2}
    px={3}
    fontWeight={400}
    fontSize="xs"
    color="white"
    placement="top"
  >
    <Badge
      tabIndex={0}
      label={status.replaceAll('_', ' ')}
      colorScheme={
        (showLabel
          ? styles.alternateStyle?.colorScheme
          : styles.colorScheme) ?? styles.colorScheme
      }
      variant={styles.variant}
      icon={styles.icon}
      showLabel={showLabel || styles.showLabel}
      showIcon
      alternateStyle={styles.alternateStyle}
    />
  </Tooltip>
  

• 检查并修复Badge的pointer-events设置
  如果你的Badge内部元素被设置了pointer-events: none，会阻断鼠标事件传递到Tooltip。可以强制开启Badge的事件响应：

  <Badge
    css={{ pointerEvents: 'auto' }}
    // 其他原有属性...
  />
  

• 用Box包裹Badge作为Tooltip的直接子元素
  若上述方法无效，可在Tooltip和Badge之间加一层Box，确保Tooltip能正常监听鼠标事件：

  <Tooltip
    // 原有Tooltip属性...
  >
    <Box tabIndex={0}>
      <Badge
        // 原有Badge属性...
      />
    </Box>
  </Tooltip>
  

原因说明 #

Chakra UI的Tooltip依赖子元素的mouseenter/mouseleave事件触发显示/隐藏逻辑。如果子元素不是可交互元素（无tabIndex、非原生交互标签如button/a），或者内部阻断了事件传递，Tooltip就无法捕获到悬停动作。通过上述方法可以确保事件正常传递到Tooltip组件。

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