When changing the data-tip doesn't refresh the the tooltip

[andressspinetti]

I have this tooltip, that has a dynamic data-tip:

<span data-tip={switchTip} onClick={this.props.switchType}><i className="icon-refresh" />Switch to {oppositeType}</span>

when switchTip changes, it doesn't refresh the information inside the data-tip, is this an issue, or more like a feature?

Thanks in advance!

[wwayne]

I've checked this and it's works well for me, so I guess:

1. Maybe your click event onClick={this.props.switchType} doesn't work
2. You can try to put <ReactTooltip /> in the last(outmost) level , for example:

return(
 <section>
   ... // your components
   <ReactTooltip />
 </section>
)

this is part of my test code

constructor() {
 this.state = {
  text = "text1"
 }
}

_onclick() {
 this.setState({
  text: text2
 })
}

return(
 <div>
   <span data-tip={this.state.text}></span>
   <button onClick={this._onclick.bind(this)}>Click</button>
   <ReactTooltip />
 </div>
)

[andressspinetti]

Thanks @wwayne, I'm gonna try that out :)

[andressspinetti]

I mean, the text wont refresh until I do trigger again 'mouseleave' and 'mouseenter', is there a way that the component runs again showTooltip(e) if that happens?, sorry, I'm new to the Reactjs world :)

[wwayne]

Ok I get you. Currently, for this tooltip component, the answer is no.
showTooltip only triggered by mouseenter and this component doesn't provide any way to add some event listener to trigger showTooltip

[andressspinetti]

Ok, got it, thanks anyway!

[alejandrosobko]

You have to add getContent to the ReactTooltip.
This worked for me:

<span data-tip={this.copyMessage()} />
<ReactTooltip effect="solid" getContent={this.copyMessage} />

copyMessage is the function that returns the message dynamically.

[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]);