如何在页面加载时显示工具提示信息 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

实现此功能

下面是link代码沙箱

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

提前致谢！

Answer 1

您可以使用 useRef 获取叠加层的功能 showing/hiding 叠加层中的工具提示

这里是the sandbox

您还可以查看下面的实现，并在代码中进行一些解释

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

我没有使用 React，但希望它能帮到你

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 
}

如何在页面加载时显示工具提示信息 4 秒然后隐藏，然后在悬停时显示？

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

javascript

reactjs

react-bootstrap