React-tooltip: 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.