How to make ReactTooltip's getContent detect and reflect changes to data-tip immediately?

[PabloMessina]

I have a single global ReactTooltip and multiple Buttons feeding this tooltip with content through their data-tip props.

For example: render() { return (<div> {this._renderButtons()} <ReactTooltip id="global" type="info" effect="solid" getContent={dataTip => dataTip} /> </div>); }

And some buttons look like this: <button data-tip="hide explanation" data-for="global" onClick={this._getToggleCallback(itemId)} > <FontAwesomeIcon icon="minus-circle" size="3x" /> </button>

And the other buttons like this: <button data-tip="show explanation" data-for="global" onClick={this._getToggleCallback(itemId)} > <FontAwesomeIcon icon="question-circle" size="3x" /> </button>

The problem is that each button click triggers a GUI re-render that toggles the clicked button's mode between "show" and "hide", but the tooltip's content does not reflect that change immediately. In order for the new data-tip to be reflected I need to move the cursor out of the button and back into it. Let me show you what I mean with some screenshots:

1. First, I place the cursor over the question mark button and it says "show explanation". So far so good.

2. I click on the button, the explanation is shown, and the button's icon changes into a "minus". The button's data-tip prop also changes to "hide explanation". However, the tooltip still keeps saying "show explanation".

3. But, if I move the cursor out of the button and back into it, then the tooltip catches up and starts saying "hide explanation" as expected.

Any ideas on how to make the data-tip changes be reflected immediately in the tooltip?

[derekreilly1990]

I would really like this feature too! we have dynamically generated data-tip content and the changes are not reflected.

I have solved it by rebuilding the tooltip when those components update by calling ReactTooltip.rebuild(), but this means passing the rebuild function down many levels which is undesirable

[DTX-92]

Vote for this. It would be enough if ReactTooltip.rebuild() worked.

[aronhelser]

Does the technique shown on the example page not work? The random number/ cropped phrase example?

[DTX-92]

@aronhelser, this one?

No, it doesn't. If you don't move mouse, tooltip doesn't update.

[aronhelser]

That one. The one on the right has a 1000 timer argument. If you shorten that to 33, you should recalculate the content at 30 fps.

[benlieb]

I had a similar issue, but solved it with mouseEnter, setState, and getContent

export default class SimilarChars extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
    }
  }

  lookup = (char) => {
    if (this.state[char]) return
    
    utils.lookup(char, 
     (results) => {
       this.setState({
          [char] : results
        })
     }
    )
  }

  dataTip = (char) => (
    this.state[char] ?
      this.state[char][0]?.pinyin.join(', ')
    :
      char
  )
  
  render() {
    return (
      <div className='data_row'>
        <div className='data_label'>sim</div>
        <div className='data'>
          { 
            similar.split('').map(
              (char , i) => {
                const tipId = uuid()
                return (
                  <span key={char}>
                    <span
                      onClick={() => utils.lookup(char, this.props.setLookupResult) }
                      onMouseEnter={() => this.lookup(char)}
                      data-tip={''}
                      data-for={tipId}
                    >{char}</span>
                    
                    <ReactTooltip 
                      id={tipId}
                      getContent={ () => this.dataTip(char) }
                    />
                  </span>
                )
              }
            )
          }
        </div>
      </div>
    )
  }
}

It seemed like a lot of work, just to get a lookup that only happens when when the tooltip is activated (simulated with mouseEnter). It seems like that would be a standard feature for something like this, but it doesn't seem implemented to me. Could be wrong tho.

[filipealonso]

+1

[Husainwow]

@aronhelser, this one?

No, it doesn't. If you don't move mouse, tooltip doesn't update.

hey guys this works for dynamic tooltip generation, thanks @DTX-92 .