React-tooltip: Momentary double render of Tooltip

[Ganasist]

I see the Tooltip rendering momentarily in double, then reverting to proper single rendering automatically. This only happens sometimes, on certain components. In most other locations it works flawlessly.

Any suggestions? See attached

[vilvadot]

If your use case is the same as mine what is happening is:

1. You added a Component with a ReactTooltip inside
2. You are using that Component more than once.

Since the tooltip binds to the data-for attribute, its binding multiple tooltips to multiple triggers. Same thing happening to me.

A solution to this would be pretty cool. Like injecting a random hash to the data-for attribute or somehting.

[Ganasist]

Yes the issue was non-unique data-for attributes in large lists. Once I added unique values there this issue cleared up. Also the tooltips seem snappier now. Thanks!

[vilvadot]

BTW A solution I came up with is creating the component as a stateful component. Set a uniqueID in the state object and update it with a random value onComponentWillMount(), use that value for your data-for attribute. That way every instance of your component gets a different ID. Hope it helps!