React-Bootstrap 0.32.4版本实现Tooltip页面加载自动显示4秒后隐藏、hover触发显示的方案咨询

我帮你搞定这个问题！在react-bootstrap 0.32.4版本里，defaultShow这个属性还没被引入——它是后续版本才添加的，所以你之前的写法自然不会生效。咱们换个思路，利用这个版本里OverlayTrigger的受控show属性，结合状态切换来实现需求。

核心思路 #

这个版本的OverlayTrigger有个关键特性：

• 当你明确传递show属性时，组件会完全听从这个布尔值控制Tooltip的显示/隐藏，忽略trigger设置的触发事件；
• 如果不传递show属性，它就会回到默认行为，响应你设置的trigger事件（比如hover、focus）。

基于这个特性，我们可以分两步实现需求：

1. 页面加载时，通过受控show属性强制Tooltip显示；
2. 4秒后移除show属性，让OverlayTrigger回归到hover/focus触发的默认逻辑。

修改后的完整代码 #

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);
    // 状态变量明确标记为控制初始Tooltip显示
    this.state = { showInitialTooltip: true }
  }

  getTooltip = () => {
    return <Tooltip id="tooltip">this is tooltip text</Tooltip>;
  };

  componentDidMount() {
    // 4秒后关闭初始显示，并切换到hover触发模式
    setTimeout(() => {
      this.setState({ showInitialTooltip: false });
    }, 4000);
  }

  render(){
    // 根据状态动态决定是否传递受控show属性
    const overlayTriggerProps = this.state.showInitialTooltip 
      ? { show: true } 
      : {};

    return (
      <>
        <OverlayTrigger
          {...overlayTriggerProps}
          trigger={['hover', 'focus']}
          placement="right"
          overlay={this.getTooltip()}
        >
          <Button>Click me!</Button>
        </OverlayTrigger>
      </>
    );
  }
}

export default App;

代码说明 #

• 初始状态showInitialTooltip设为true，此时给OverlayTrigger传递show: true，强制Tooltip在页面加载时自动显示；
• componentDidMount中的定时器会在4秒后将状态改为false，此时不再传递show属性，OverlayTrigger就会按照你设置的trigger规则工作——只有鼠标悬停或按钮获得焦点时，Tooltip才会显示；
• 把状态变量名改为showInitialTooltip，让代码语义更清晰，一眼就能看出这个状态的作用。

这样修改后，完全符合你的需求：页面加载Tooltip自动显示4秒，之后仅在hover/focus时显示。

内容的提问来源于stack exchange，提问作者young_minds1