Tooltip not re-rendering on state change

[jaredramirez]

Versions:
react-tooltip: 3.3.0
react: 15.4.2

Issue:
I have a tooltip that is rendering data from the state around it, to display an error message if a textfield is invalid.

render() {
  return (
    <input
      type={'text'}
      value={this.state.value}
      onChange={this.onTextChange}
      data-tip={this.state.errors[0]} // only show most significant error
      data-for={this.props.name}
      data-event={'focus'}
      data-event-off={'focusout'}
    />
    ...
    <ReactTooltip
      id={this.props.name}
      place={'bottom'}
      effect={'solid'}
      multiline={true}
    />
  );
}

As far at the focus events go, it works perfectly. However, when I revalidate the field and call

this.setState({
  errors: newArrayOfErrors,
});

the the tooltip does not updated.

I have tried

this.setState({
  errors: newArrayOfErrors,
}, () => ReactTooltip.rebuild());

and

componentDidUpdate() {
  ReactTooltip.rebuild());
}

but there is no difference in behavior.

Is there a way to include stateful data in the tooltip?

[khorolets]

I have the same issue. It looks like ReactTooltip.rebuild() doesn't do anything or tooltips ignoring that call.

updated

I've tried to use dynamic content via getContent and via children. The result is the same, content won't change until tooltip would be hidden.

BTW, I know this is not useful at all, but anyway, it I do something like

<ReactTooltip
  getContent={[ () => (<span>{this.state.tooltipContent}</span>), 1000]}
/>

then the content is changing.

Will appreciate any help. Thanks!

[vuau]

guys, try rebuilding ReactTooltip after the target component has updated. It works for me

componentDidUpdate() {
  ReactTooltip.rebuild();
}

[seethroughdev]

I'm getting the same issue, ReactTooltip.rebuild(), does not seem to rebuild until the tooltip is closed and reopened.

It seems like some people are having success but not others. Does anyone have more perspective on how to get the tooltip to update on state change without closing it first?

[bbeckrest]

Although it's still open, this PR (#281) should help you guys. I was facing the exact same issue (dynamic content via children), and these changes make it work.

[khorolets]

@bbeckrest Thank you, I'll try your fix on weekend, I hope it'll help :)

[seethroughdev]

Thanks for that @bbeckrest ! look forward to it seeing it get merged.

[Thoughtscript]

I know this is an older issue but I ran into this myself. Want to throw in my two cents if it helps - for our particular scenario we were rerendering the data-tip element but couldn't get the tooltip to change immediately (without mousemove).

The trick was to do this:

//In render():

{check ?

<div
data-for="example"
data-tip={textOne}/>:

<div
data-for="example"
data-tip={textTwo}/>
} 

<ReactToolTip id="example"
 type="info" effect="solid" 
getContent={[() => { return (check) ? textOne: textTwo; }]}/>

Such that each data-tip element does update the ReactToolTip by passing in its tip data AND setting getContent() which triggers updateToolTip() WITHOUT mousemove. Hope that helps someone!

[kenjinp]

@Thoughtscript I think the reason this is working is because you passed an array which triggers the function as if it was a setTimeout with a default interval

[patotoma]

I actually managed to fix this by adding the key property:

<a
  key={row.show_description ? 'show-description-showed' : 'show-description-hidden'}
  data-tip={row.show_description ? 'Hide description' : 'Show description'}
>
  <ReactTooltip
    place="top"
    type="info"
    effect="solid"
  />
</a>

So React will re-render the current DOM part, instead of re-using.

[aronhelser]

Thanks for the feedback. The 'key' tip and PR #281 should handle this for everyone. Closing.

[olegandreyev]

@patotoma
Thank you, works like a charm

[Rafael-Ramblas]

@patotoma had a similiar issue involving a table with drilldown, your solution works very well thx

[kainat-anjum]

It works if you add key to your component which has data-tip prop. And also do ReactTooltip.rebuild() in useEffect on state change.

[slimgabsi]

the solution is to hide and then show the tooltip on state change and if your cmp is hovered .
Note that am using functional cmps and useRef hook
I guess you can do the same with componentDidUpdate()
use onMouseEnter and onMouseLeave to set the hovred state

        const handleOnMouseLeave = () => {
		setIsHovered(false);
	};
	const handleOnMouseEnter = () => {
		setIsHovered(true);
	};

		useEffect(() => {
       if (myRef?.current && isHovered) {
		ReactTooltip.hide();
		ReactTooltip.show(myRef.current);
	}, [myState]);