v5 - Example of showing a tooltip for each item in a list?

[Jared-Dahlke]

react-tooltip version: v5.0.0

Having a hard time showing a tooltip for each item in a list:

right now i have:

array.map(item=> {
return (
   <>
       <ReactTooltip anchorId={`name-${item.id}`} />
       <h3
          data-tooltip-content={item.name}                    
           id={`name-${item.id}`}
           className='truncate'
       >
           {item.name}
       </h3>
   </>
)
}

expected result: each h3 shows a different tooltip when hovered over
actual result: only the first item in the array list has a tooltip when hovered over

[danielbarion]

Hi,

Just confirming, have you tried adding key attribute into the fragment or in the elements?

I guess the react needs key attribute when dynamic rendering elements through iterators to identify the component

[danielbarion]

https://codesandbox.io/s/relaxed-ardinghelli-1y9ydh?file=/src/App.tsx

Working example