Un poco raro aquí. Mi sitio web está prácticamente terminado, solo hay un problema. He implementado información sobre herramientas, ¡pero solo se muestran una vez que actualizo la página! Aquí hay un GIF que reproduce el problema:
https://i.imgur.com/NbHyN77.mp4
El paquete es de NPM, en el siguiente enlace: https://www.npmjs.com/package/react-tooltip
Revisé su documentación, solución de problemas y problemas informados en su repositorio de github, pero no hay nada que describa mi problema. El sitio está disponible en: https://ezekias1337.github.io/Burning-Crusade-Talent-Calculator/#/
Por extraño que parezca, si marco una de las rutas y la cargo en una pestaña nueva, se carga la primera vez. El problema solo ocurre cuando selecciono el componente de mis íconos.
Me aseguré de importar ReactTooltip desde "react-tooltip"; También agregué en la parte inferior de cada componente y en app.js. Agregar el atributo data-for no solucionó el problema.
Aquí está el código de mi 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;Aquí está el código relevante para la información sobre herramientas en cada componente individual:
a.) La imagen que tiene la información sobre herramientas (cada imagen tiene información sobre herramientas única)
<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.) La parte inferior del componente
<ReactTooltip data-html="true" />¿Alguna idea de lo que puedo hacer para arreglar esto?
En caso de que alguien más tenga este problema, finalmente encontré la solución después de horas de tirarme de los pelos.
Usé la siguiente función:
rebuildToolTip(){ ReactTooltip.rebuild(); }Posteriormente, agregué esta función como un controlador de eventos para onLoad en el componente que se representa.
<div style={{ position: "relative" }} onContextMenu={(e) => e.preventDefault()} className="frame-wrapper" id="Hunter" onLoad={() => { this.scrollComponentIntoView(); this.rebuildToolTip(); }} >Aquí hay algo que funcionó para mí ( https://github.com/wwayne/react-tooltip/issues/268 ), cree un nuevo componente para la información sobre herramientas y pase los detalles requeridos en accesorios como el código a continuación.
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;