chrisrzhou / react-wordcloud

☁️ Simple React + D3 wordcloud component with powerful features.

Home Page:https://react-wordcloud.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Some tooltipOptions have no effect

spope851 opened this issue · comments

sandbox: https://codesandbox.io/s/react-wordcloud-basic-forked-8o005q

added the following tooltipOptions from the tippy docs:
<ReactWordcloud size={size} options={{ deterministic: true, fontSizes: [24, 72], svgAttributes: { style: "transform: translate(-120px, -100px);" }, fontFamily: "arial-black", // these tippy props have no effect tooltipOptions: { interactive: true, interactiveBorder: 100, interactiveDebounce: 100, appendTo: () => document.body, sticky: true, plugins: [sticky], }, }} callbacks={{ getWordColor: (word) => sentenceTerms.includes(word.text) ? "lime" : ["red", "blue", "brown", "purple"][word.value % 4], onWordClick: (word) => { setPopoverOpen(true) setPopoverEntity(word.text) }, }} words={words} />

these don't seem to affect the tippy. expected functionality would be that the tippy becomes interactive and you can move the mouse onto it. I want to put some buttons in the tippy so without this functionality that won't be possible

I believe everything is installed properly and I've imported the tippy stylesheets into the app.tsx of my nextjs app

thanks in advance for checking this!