OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Is it possible to use Singleton with Tippy in a React .map function? If so, how?

  • Thread starter Thread starter SwineBurglar
  • Start date Start date
S

SwineBurglar

Guest
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 Singletop section of the NPM page for @tippyjs/react (https://github.com/atomiks/tippyjs-react?tab=readme-ov-file#-usesingleton) states to do the following:

Code:
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:

Code:
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! :)

<p>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 <code>@tippyjs/react</code>, 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.</p>
<p>The Singletop section of the NPM page for <code>@tippyjs/react</code> (<a href="https://github.com/atomiks/tippyjs-react?tab=readme-ov-file#-usesingleton" rel="nofollow noreferrer">https://github.com/atomiks/tippyjs-react?tab=readme-ov-file#-usesingleton</a>) states to do the following:</p>
<pre><code>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>
</>
);
}
</code></pre>
<p>I have my code set up as follows:</p>
<pre><code>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>
...
</>
);
</code></pre>
<p>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 <code>@tippyjs/react</code> 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.</p>
<p>Is there any way to use Singleton within a .map function? It doesn't seem to work regardless of where I place the <code><Tippy singleton={source} delay={50}/></code> element, and I can't think of a way to cause the .map function to generate a <code><Tippy singleton={source} delay={50}/></code> element before generating all the buttons based on the array passed into it.</p>
<hr />
<p>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! :)</p>
 

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top