react-tooltip: behavior I don't understand, is this a quirk of react or react-tooltip?

I only ever put <ReactTooltip /> in one place, which makes sense to me. I only import it in that same file. But in order for the tooltips to work, I have to <p data-tip="hello world">Tooltip</p> either in the same component or a component close to it (maybe it has to be on the same ‘side’ of the smart component, I’m not sure). Once I put <p data-tip="hello world">Tooltip</p> In a component ‘close’ to where its required, the tooltips everywhere start working.

I can confirm that putting ReactTooltip.rebuild() in componentDidMount (and reloading page) does NOT work, but in componentDidUpdate DOES work.

This is not such a problem for me, I thought I’d just point out this strange behavior. I’m not sure how smart components in redux work but it looks like some voodoo is going on there and it might be interfering with react-tooltips, or it might have nothing to do with it, but thats all I can think of.

Good looking tooltips btw 👍

If I’m not misunderstand, the code structure you said is as follows:

<div>
<HighLevel>
   <MiddleLevel>
       <LowLevel />
   </MiddleLevel>
</HighLevel>
<ReactTooltip />
</div>

LowLevel: 
render () {
 return (
   <p data-tip='xxx'></p>
 )
}

If so, on my test, this works good. So I suppose you mount the lower level component after triggering some actions?

There is a ReactTooltip.rebuild() function to ‘re-bind’ tooltip, so I think you can take a try by

import ReactTooltip from 'react-tooltip'
export default class MiddleLevel extends React.Component {
  componentDidMount () {
     React.rebuild()
  }
}

Let me know if I misunderstand your problem.

Appreciate the suggestion however I don’t feel like adding such hack to every component that has a data-tip as this feels very un-React. Not to mention that componentWillMount is sunsetting at some point soon. But I guess it could be called on didMount without the timeout…

I’m afraid I’ll have to implement my own tooltip component or switch to another library as I’m not able to find any elegant solution for react-toolip. Thanks for your attention.

@oyeanuj 1.Yes, I suggested to do that(looks little wired), and as @kswope said, put ReactTooltip.rebuild() in componentDidUpdate could also works, I think you can also take a try on this way.

2.Yes, tooltip supports what you need, you can check the advance features in example html tooltip : check html feature in the doc JSX: doc

Please feel free to ask me if you still have problems.

Try

setTimeout(() => {
     ReactTooltip.rebuild();
 }, 100)

in componentDidMount can works for you.

I don’t think Redux could interfere react-tooltips because I’ve used them together, I’m not very clear about your product’s requirements but in my practice, I put <ReactTooltip /> in every smart component, it is just like what you said to be on the same 'side' of the smart component, maybe that’s why I never meet with the strange behavior that you said.

Since smart component is always to be the high level component(like routeHandler in react-router), putting <ReactTooltip /> in every smart component is reasonable.

So I suggest you try to put <ReactTooltip /> in every smart component instead of importing it in a same file.