Chakra UI tooltip wont work when child is badge

Question

Hey I have been unable to get a tooltip to show up when I hover over this badge. I am using Chakra UI code below thanks

     <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
         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>```

score 0 · Accepted Answer · answered May 10 '23 at 16:00

Place a span tag between the tooltip and the badge like so:

  <Tooltip label={reason} placement="bottom">
      <span>
        <Badge
          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}
        />
      </span>
    </Tooltip>

Chakra UI tooltip wont work when child is badge

1 Answers1