如何通过React状态控制react-simple-tooltip延迟显示

核心逻辑不需要拆分Tooltip组件和它包裹的子元素，只需要通过React状态控制传入Tooltip的content值，配合鼠标事件+setTimeout就能实现延迟效果，完全兼容原有代码结构。

实现步骤 #

• 用状态控制tooltip内容的显隐，用ref存储定时器实例，避免重渲染导致定时器id丢失
• 在Tooltip外层套一层行内/块级容器，绑定鼠标移入、移出事件，不破坏原有Tooltip和子元素的嵌套关系
• 鼠标移入时，等待设定的延迟时长后再把显隐状态设为true；鼠标移出时立刻清除定时器、把显隐状态设为false
• Tooltip的content属性根据显隐状态动态传值：状态为true时传实际提示内容，为false时传空字符串即可

完整可运行代码 #

import { useState, useRef, useEffect } from "react";
import Tooltip from "react-simple-tooltip";

export default function App() {
  const [showTooltip, setShowTooltip] = useState(false);
  const timerRef = useRef(null);
  // 自定义延迟时长，单位毫秒，这里设为300ms
  const HOVER_DELAY = 300;

  // 组件卸载时清除残留定时器，避免内存泄漏
  useEffect(() => {
    return () => timerRef.current && clearTimeout(timerRef.current);
  }, []);

  const handleMouseEnter = () => {
    // 提前清除旧定时器，避免快速移入移出时的异常触发
    timerRef.current && clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => {
      setShowTooltip(true);
    }, HOVER_DELAY);
  };

  const handleMouseLeave = () => {
    timerRef.current && clearTimeout(timerRef.current);
    setShowTooltip(false);
  };

  return (
    <div className="App">
      <br />
      <br />
      <br />
      <br />
      <br />
      {/* 外层span用于绑定hover事件，inline-block保证hover区域和内部元素大小一致 */}
      <span
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        style={{ display: "inline-block" }}
      >
        <Tooltip content={showTooltip ? "tooltip content" : ""}>
          hover me
        </Tooltip>
      </span>
    </div>
  );
}

注意事项 #

• 如果Tooltip包裹的是块级元素，外层容器可以换成div，不需要额外设置display: inline-block
• 必须在鼠标移出、组件卸载两个时机清除定时器，避免快速滑动经过元素时tooltip误弹出
• 不需要修改第三方库的任何源码，原有Tooltip的其他配置项（比如位置、样式）都可以正常使用，不受影响

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