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

If I put

<ReactTooltip />

in a ‘high level’ component and put

<p data-tip="hello world">Tooltip</p>

nested about 3 components down then tooltips don’t show. However, if I put a

<p data-tip="hello world">Tooltip</p>

half way between them the lower level tooltips work, but only if I mouse over the mid level tooltip first.

If I put

<ReactTooltip />

in the ‘middle’ then tooltips from all nested levels work.

If I browse through the DOM I can see all the nodes in the right places, it just seems like the ReactTooltip javascript event isn’t setting up or it can’t see the tooltip node at a distance.

[kswope]

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 👍

[wwayne]

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.