如何用TypeScript+Material-UI给复制按钮添加Tooltip展示复制状态提示

步骤1：修正现有代码问题 #

你原有复制逻辑中navigator.clipboard.writeText的参数误用了未定义的copyMe变量，需要替换为入参text才能正常复制传入的内容。

步骤2：补充Tooltip相关逻辑 #

需要额外新增控制Tooltip显隐的状态，以及自动关闭提示的定时器逻辑，避免提示一直展示在页面上。

步骤3：完整可运行代码示例 #

import { useState, useEffect } from 'react';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';

const CopyButton = () => {
  // 控制提示显隐的状态
  const [showCopyTip, setShowCopyTip] = useState(false);
  // 存储复制结果提示文案
  const [copySuccess, setCopySuccess] = useState('');

  const copyToClipBoard = async (text: string) => {
    try {
      // 修正原有参数错误，使用传入的text变量
      await navigator.clipboard.writeText(text);
      setCopySuccess('复制成功！');
    } catch (err) {
      setCopySuccess('复制失败，请重试');
    }
    // 复制操作完成后触发提示展示
    setShowCopyTip(true);
  };

  // 提示展示3秒后自动关闭
  useEffect(() => {
    if (showCopyTip) {
      const timer = setTimeout(() => {
        setShowCopyTip(false);
      }, 3000);
      return () => clearTimeout(timer);
    }
  }, [showCopyTip]);

  return (
    <Tooltip
      title={copySuccess}
      open={showCopyTip}
      placement="top"
      arrow
    >
      {/* Tooltip仅允许有一个直接子元素，直接包裹Button即可 */}
      <Button                                    
        onClick={() => copyToClipBoard('some text to copy')}
        variant="contained"
      >
        复制链接
      </Button>
    </Tooltip>
  )
};

export default CopyButton;

关键说明 #

• Tooltip的open属性绑定显隐状态，可以精准控制仅在复制操作完成后展示提示，避免hover时误触发空白提示
• arrow属性可以给提示添加指向按钮的箭头，视觉效果更清晰
• 可以通过placement属性调整提示出现的位置，可选值有top/bottom/left/right等
• 3秒自动关闭的时长可以根据业务需求灵活调整，也可以额外新增点击提示手动关闭的交互

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