Material UI Tooltip：如何在悬停和点击时显示不同消息

要实现悬停显示功能说明、点击后显示操作确认消息并保持1-2秒的效果，你可以通过状态管理结合定时器控制Tooltip的显示文本，具体实现步骤如下：

1. 添加状态与定时器逻辑 #

在组件中引入useState和useEffect，通过状态变量动态切换Tooltip的标题内容：

import { useState, useEffect } from 'react';

const YourComponent = () => {
  // 管理Tooltip显示的文本内容
  const [tooltipText, setTooltipText] = useState("Copy URL with all parameters to clipboard");
  // 存储定时器ID，用于组件卸载时清理
  const [timerId, setTimerId] = useState(null);

  const copyUrlWithParams = () => {
    const newUrl = window.location.origin + window.location.pathname + "?" + queryParameters.toString();
    navigator.clipboard.writeText(newUrl);
    
    // 点击后切换为操作确认消息
    setTooltipText("URL copied to clipboard!");
    // 设置2秒定时器，到期后恢复原功能说明
    const id = setTimeout(() => {
      setTooltipText("Copy URL with all parameters to clipboard");
    }, 2000);
    setTimerId(id);
  };

  // 组件卸载时清理定时器，避免内存泄漏
  useEffect(() => {
    return () => {
      if (timerId) clearTimeout(timerId);
    };
  }, [timerId]);

  return (
    <Tooltip title={tooltipText}>
      <InsertLinkIcon onClick={() => copyUrlWithParams()} />
    </Tooltip>
  );
};

2. 核心逻辑说明 #

• 初始状态下，Tooltip显示默认的功能说明文本；
• 点击图标执行复制操作后，立即切换Tooltip文本为确认消息；
• 通过setTimeout设置2秒延迟，时间到后自动恢复原功能说明；
• 用useEffect在组件卸载时清理定时器，防止内存泄漏。

3. 可选优化 #

如果希望点击后的确认消息不受鼠标移出影响（保持显示直到定时器结束），可以给Tooltip添加persistent属性（部分UI库如Material-UI支持该属性）：

<Tooltip title={tooltipText} persistent>
  <InsertLinkIcon onClick={() => copyUrlWithParams()} />
</Tooltip>

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