CODEWITHSUNDEEP
reactjstypescriptmappingtooltip
agobago
agobago

Reputation: 91

How to display different tooltip text while mapping over a list?

I am looping over a list and I want to add different tooltip text to different icons, but not exactly sure how to do it. Here's what I have so far:

          <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 && (<Badge borderColor={theme.color.alert} color={theme.color.alert} top="-3rem" right="-1.5rem"  content={sv.count}/>) }
              <Wedge />
            </WedgeContainer>
            <Spacer width="4rem" />
          </React.Fragment>
        ))}

And this is what I'm trying to achieve:

enter image description here

Upvotes: 0

Views: 901

Answers (1)

kevin
kevin

Reputation: 1112

You can create an array outside of your loop. In my example i'm using the index to access the items, but in your case you can be creative and do it the way it suits best.

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 && (<Badge borderColor={theme.color.alert} color={theme.color.alert} top="-3rem" right="-1.5rem"  content={sv.count}/>) }
          <Wedge />
        </WedgeContainer>
        <Spacer width="4rem" />
      </React.Fragment>
    ))}

If the message is in one of your 'sv' items you can simply pass sv.x to tooltip content instead.

Upvotes: 1

Related Questions