React-Tooltip not displaying until page is refreshed

Question

Bit of a weird one here. My website is virtually done, there is just one issue. I've implemented tooltips, but they only display once I refresh the page! Here is a GIF reproducing the issue:

https://i.imgur.com/NbHyN77.mp4

The package is from NPM, at the following link: https://www.npmjs.com/package/react-tooltip

I've went through their documentation, troubleshooting and issues reported on their github repo, but there is nothing describing my issue. The site is live at: https://ezekias1337.github.io/Burning-Crusade-Talent-Calculator/#/

Oddly enough, if I bookmark one of the routes and load it in a fresh tab, it loads the first time. The issue only happens when I select the component from my Icons.

I made sure to import ReactTooltip from "react-tooltip"; I also added at the bottom of each component, and in app.js. Adding the data-for attribute hasn't fixed the issue.

Here is the code of my App.js:

import ReactTooltip from 'react-tooltip';

class App extends Component {
  
  
    render() {
      return (
          <div className="App">
                            <CustomNavbar />
              <ClassSelector />
              
              <FooterComponent />
              <ReactTooltip 
                html={true}
              />
          </div>
      );
  }
}

export default App;

Here is the code relevant to tooltips in each individual component:

a.) The image that has the tooltip (every image has unique tooltip)

<img
                  onMouseEnter={this.displayMouseOverlayInnerElement}
                  onMouseLeave={this.hideMouseOverlayInnerElement}
                  onMouseDown={() => {
                    this.talentClick();
                    this.toolTipFunction();
                  }}
                  onTouchEnd={this.talentClick}
                  className="talentHover"
                  src={overlayImage}
                  style={{ display: "none" }}
                  data-tip={Hunter[0].toolTip[0]}
                  id="1"
                />

b.) The bottom of the component

<ReactTooltip data-html="true" />

Any idea what I can do to fix this?

Answer 1

In case anyone else is having this issue, I have finally found the solution after hours of pulling my hair out.

I used the following function:

rebuildToolTip(){
    ReactTooltip.rebuild();
}

Subsequently I added this function as an event handler for onLoad on the component being rendered.

<div
    style={{ position: "relative" }}
    onContextMenu={(e) => e.preventDefault()}
    className="frame-wrapper"
    id="Hunter"
    onLoad={() => {
      this.scrollComponentIntoView();
      this.rebuildToolTip();
    }}
  >