Interactive Tooltip doesn't work

[Volodymyr]

I'm trying to enable interactivity feature of Tippy JS, so I can hover over tooltip, however it doesn't work:

Here is a code I have:

<ReactWordcloud
                words={words}
                options={{
                    colors: COLOR_THEME.slice(0, 4),
                    enableTooltip: true,
                    fontFamily: 'Arial',
                    fontSizes: [24, 48],
                    rotations: 0,
                    tooltipOptions: {
                        allowHTML: true,
                        appendTo: document.body,
                        arrow: true,
                        interactive: true
                    }
                }}
                maxWords={50}
            />

Am I doing something wrong or is it a Tippy JS's bug?

[Daniel Mayer]

@volodymyr-nexxt
sounds like the import for the animation css file from tippy.js might be missing:

import "tippy.js/animations/scale.css";

[Volodymyr]

@DanielM235 it is included

[Chris Zhou]

@volodymyr-nexxt, I think you are seeing this because the word callbacks in react-wordcloud controls the showing/hiding of the tooltips https://github.com/chrisrzhou/react-wordcloud/blob/main/src/layout.js#L64-L76

It is probably applying the tooltipOptions as intended, but that code is opinionated and shows/hides the tooltip.

To resolve this, I think you might need:

• to disable tooltip feature entirely
• have custom onWordMouseOver and onWordMouseOut events and wire up a custom tooltip library to achieve your needs (you can still use tooltips).

I don't think it is in the scope of the project to change this tooltip behavior since the intention is to support simple tooltips for convenience. Let me know if this gives you enough information to resolve your issue!

[Volodymyr]

@chrisrzhou I think I fixed it, I'm sending a PR shortly.

[Chris Zhou]

Accepted MR and I believe this issue is resolved. Thank you for fixing and improving the library!