如何在頁面加載時顯示工具提示信息 4 秒然后隱藏，然后在懸停時顯示？

Question

我正在使用 react-bootstrap 版本0.32.4 ，我無法更新版本，這會帶來很多變化。

我想讓一個工具提示信息在頁面加載時顯示 4 秒，然后它應該隱藏，之后工具提示信息應該在懸停時顯示。

下面是代碼：

 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;

我正在嘗試使用 defaultShow，但它什么也沒做。 如何使用 react-bootstrap 0.32.4版實現此功能

下面是代碼沙箱的鏈接：

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

Answer 1

您可以使用useRef獲取疊加層的功能，以在疊加層中顯示/隱藏工具提示

這里是沙盒

您還可以通過代碼中的一些解釋來查看以下實現

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;

Answer 2

我不使用反應，但希望它可以幫助你

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 
}