How can I show tooltip info for 4 seconds on page load and then hide, then after show on hover?

Question

I am using react-bootstrap version 0.32.4, I can't update the version, that will bring up many changes.

I want to have a tooltip info showing for 4 seconds on page load and then it should hide, after that the tool tip info should be shown on hover.

Below is the code:

 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;

I am trying to use defaultShow but it is not doing anything. How can I achieve this functionality with react-bootstrap version 0.32.4

Below is the link to code sandbox:

https://codesandbox.io/s/react-bootstrap3-tooltip-jqnzqs

Answer 1

You can use useRef to get the overlay's functions for showing/hiding the tooltip within the overlay

Here is the sandbox

You also can look into the below implementation with some explanation in the code

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;