Estoy usando react-bootstrap versión 0.32.4 , no puedo actualizar la versión, eso generará muchos cambios.
Quiero tener una información de información sobre herramientas que se muestre durante 4 segundos en la carga de la página y luego debería ocultarse, después de eso, la información de información sobre herramientas debería mostrarse al pasar el mouse.
A continuación se muestra el código:
import React from "react"; import "./styles.css"; import { Button, Tooltip, OverlayTrigger } from "react-bootstrap"; import { render } from "react-dom"; class App extends React.Component { constructor(props){ super(props); this.state = { show: true } } getTooltip = () => { return <Tooltip id="tooltip">this is tooltip text</Tooltip>; }; componentDidMount() { console.log("ran") setTimeout(function() { this.setState({show: false}) }.bind(this), 4000); } render(){ console.log(`running for componet did update: ${this.state.show}`) return ( <> <OverlayTrigger trigger={['hover', 'focus']} defaultShow={this.state.show} placement="right" overlay={this.getTooltip()} > <Button>Click me!</Button> </OverlayTrigger> </> ); } } export default App;Estoy tratando de usar defaultShow pero no está haciendo nada. ¿Cómo puedo lograr esta funcionalidad con react-bootstrap versión 0.32.4?
A continuación se muestra el enlace al código sandbox:
Puede usar useRef para obtener las funciones de la superposición para mostrar/ocultar la información sobre herramientas dentro de la superposición
Aquí está la caja de arena
También puede ver la implementación a continuación con alguna explicación en el código
import React from "react"; import "./styles.css"; import { Button, Tooltip, OverlayTrigger } from "react-bootstrap"; class App extends React.Component { // const [isShowing, setIsShowing] = useState(true); constructor(props) { super(props); //create the ref for the overlay this.overlayRef = React.createRef(); this.state = { isShowing: true }; } getTooltip = () => { return <Tooltip id="tooltip">this is tooltip text</Tooltip>; }; componentDidMount() { //using ref to show the tooltip in the overlay this.overlayRef.current.show(); setTimeout(() => { //using ref to hide the tooltip in the overlay after 4 seconds this.overlayRef.current.hide(); this.setState({ isShowing: false }); }, 4000); } render() { console.log(this.state.isShowing); return ( <div className="tool-tip-div"> <OverlayTrigger ref={this.overlayRef} trigger={["hover", "focus"]} placement="top" overlay={this.getTooltip()} defaultShow={this.state.isShowing} > <Button>Click me!</Button> </OverlayTrigger> </div> ); } } export default App;No trabajo con reaccionar, pero espero que te ayude.
constructor(props) { super(props); this.state = { isShowing: true, showDelayPassed: false, showDelay: 4000 }; } componentDidMount() { setTimeout( function () { this.setState({ showDelayPassed: true }); }.bind(this), this.state.showDelay); } { this.state.isShowing ? <Tooltip defaultShow={false} id="tooltip" onMouseEnter={() => { if(this.state.showDelayPassed) { this.setState({ isShowing: false }) } }} > this is test tooltip text </Tooltip> : null }