I have a React component created that shows a row of buttons, which are generated by using a .map function to create them all from a passed-in array. I have set up a Tippy tooltip for each button using the NPM package @@tippyjs/react, and they all work correctly individually. I am now trying to implement the Singleton functionality so the transition is smooth between the tooltips for each button in the row.

The NPM page for @tippyjs/react (https://github.com/atomiks/tippyjs-react?tab=readme-ov-file) states to do the following:

import Tippy, {useSingleton} from '@tippyjs/react';

function App() {
  const [source, target] = useSingleton();

  return (
    <>
      {/* This is the tippy that gets used as the singleton */}
      <Tippy singleton={source} delay={500} />

      {/* These become "virtual" */}
      <Tippy content="Hello" singleton={target}>
        <button>Reference</button>
      </Tippy>
      <Tippy content="Bye" singleton={target}>
        <button>Reference</button>
      </Tippy>
    </>
  );
}

I have my code set up as follows:

import Tippy, {useSingleton} from '@tippyjs/react';

export default function TrackedShow({...}){
    const [source, target] = useSingleton();
    return(
        <>
            ...
                <div className='tracked-show-season-episodes-container'>
                    <Tippy singleton={source} delay={50}/>
                    {trackedShowSeason.episodeObjectIds.map((episode, episodeIndex)=>{
                        return(
                            <form className='tracked-show-season-episode-container' id={`episode-${episode._id}`} key={`episode-${episode._id}`} onSubmit={handleToggleEpisodeWatched}>
                                <Tippy
                                    singleton={target}
                                    theme={'tippy-theme'}
                                    animation={'scale'}
                                    plugins={[followCursor, animateFill, sticky]}
                                    followCursor={'vertical'}
                                    sticky={true}
                                    placement={'bottom'}
                                    hideOnClick={false}
                                    content=
                                        {hoveredEpisodeTile && (hoveredEpisodeTile===episode._id) &&
                                            <div className='tippy-content'>
                                                <p className='tippy-title'>Episode Title:</p>
                                                <p className='tippy-episode-title'>"{episode.episodeTitle}"</p>
                                            </div>
                                        }
                                >
                                    <button
                                        className={'tracked-show-season-episode-button '+((watchedEpisodes.includes(episode._id)) ? 'watched' : 'unwatched')}
                                        type='submit' value={episode._id}
                                        onMouseOver={handleEpisodeTileMouseOver}
                                        onMouseOut={handleEpisodeTileMouseOut}>
                                        {episode.episodeNumber ? `Episode ${episode.episodeNumber}` : 'Special'}
                                    </button>
                                </Tippy>

                            </form>
                        )
                    })}
                </div>
            ...
        </>
    );

I am at a loss for how to correctly implement Singleton in this case, if it’s even possible, because I can’t find an example online of Singleton being used within a .map function. The @tippyjs/react docs I pasted above show Singleton being used on hard-coded buttons. This is not possible in my case because the buttons are generated dynamically when a user loads a page.

Is there any way to use Singleton within a .map function? It doesn’t seem to work regardless of where I place the <Tippy singleton={source} delay={50}/> element, and I can’t think of a way to cause the .map function to generate a <Tippy singleton={source} delay={50}/> element before generating all the buttons based on the array passed into it.

Note: Please, if you’re going to downvote my question, please at least leave a comment as to why. Is my question poorly written? Do you just not like my username? Are you simply feeling grumpy today? I’ve had issues in the past with people downvoting my seemingly well-written questions with no explanation, so I have decided to start adding this request. Since then, I have not gotten any baseless downvotes! I am here to learn, and downvoting my question without telling me why does not help me to learn. Thank you for understanding! 🙂