CODEWITHSUNDEEP
javascriptreactjsreact-tooltip
Frank Edwards
Frank Edwards

Reputation: 96

React-Tooltip not displaying until page is refreshed

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?

Upvotes: 4

Views: 5912

Answers (2)

Bibek Panda
Bibek Panda

Reputation: 619

Here is something that worked for me (https://github.com/wwayne/react-tooltip/issues/268), create a new component for tool tip and pass required details in props as below code.

import React from "react";
import ReactDOM from "react-dom";
import ReactTooltip from "react-tooltip";

// Create root level element for react-tooltips
const domNode = document.createElement('div');
document.body.appendChild(domNode);

// Wrapper component to portal react-tooltips
function BodyPortal ({ children }) {
  return ReactDOM.createPortal(
    children,
    domNode
  );
}

// Custom tooltip wrapper to ensure all tooltips get rendered into the portal
function CustomReactTooltip (props) {
  return (
    <BodyPortal>
      <ReactTooltip
        type="light"
        effect="solid"
        delayHide={50}
        {...props}
      />
    </BodyPortal>
  );
}

export default CustomReactTooltip;

Upvotes: 0

Frank Edwards
Frank Edwards

Reputation: 96

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();
    }}
  >

Upvotes: 5

Related Questions