Блог

Я просматриваю список и хочу добавить другой текст подсказки к разным значкам, но не совсем уверен, как это сделать. Вот что у меня есть до сих пор:

           <React.Fragment key={sv.key}>
            <WedgeContainer>
              <Button variant="icon" onClick={() => openView(sv)} disabled={sv.disabled || !item.canEdit}>
                <Tooltip content="Hello">
              <Icon iconId={sv.iconId} size="medium" cursor="pointer" color={theme.font.color.primaryDark} />
              </Tooltip>
              </Button>
                { !!sv.count amp;amp; (<Badge borderColor={theme.color.alert} color={theme.color.alert} top="-3rem" right="-1.5rem"  content={sv.count}/>) }
              <Wedge />
            </WedgeContainer>
            <Spacer width="4rem" />
          </React.Fragment>
        ))}
 

И это то, чего я пытаюсь достичь:

Вы можете создать массив вне своего цикла. В моем примере я использую индекс для доступа к элементам, но в вашем случае вы можете проявить творческий подход и сделать это так, как вам больше подходит.

 const tooltipContent = [
   'tooltip1',
   'tooltip2',
   'tooltip3',
]   



<React.Fragment key={sv.key}>
        <WedgeContainer>
          <Button variant="icon" onClick={() => openView(sv)} disabled={sv.disabled || !item.canEdit}>
            <Tooltip content={tooltipContent[index]}>
          <Icon iconId={sv.iconId} size="medium" cursor="pointer" color={theme.font.color.primaryDark} />
          </Tooltip>
          </Button>
            { !!sv.count amp;amp; (<Badge borderColor={theme.color.alert} color={theme.color.alert} top="-3rem" right="-1.5rem"  content={sv.count}/>) }
          <Wedge />
        </WedgeContainer>
        <Spacer width="4rem" />
      </React.Fragment>
    ))}
 

Если сообщение находится в одном из ваших элементов «sv», вы можете просто передать sv.x в содержимое всплывающей подсказки вместо этого.