在按钮上添加工具提示

Question

我正在尝试创建一个按钮，该按钮使用 TypeScript 和 Material-UI 从变量复制到剪贴板内容。我试过这个：

const [copySuccess, setCopySuccess] = useState('');

const copyToClipBoard = async (text: string) => {
    try {
        await navigator.clipboard.writeText(copyMe);
        setCopySuccess('Copied!');
    } catch (err) {
        setCopySuccess('Failed to copy!');
    }
};

调用上述代码的按钮：

<Button                                    
    onClick={() => copyToClipBoard('some text to copy')}
>
    Copy Url
</Button>

您知道如何在按钮上添加 Tooltip https://mui.com/components/tooltips/ 以在复制文本时显示复制成功的消息吗？

Answer 1

您可以使用 MUI 工具提示的 controlled version 手动打开和关闭某些事件的工具提示。

更新后的代码可能如下所示，以显示和隐藏工具提示。

import * as React from "react";
import Button from "@mui/material/Button";
import Tooltip from "@mui/material/Tooltip";

export default function ControlledTooltips() {
  const [open, setOpen] = React.useState(false);
  const [copyFeedback, setCopyFeedback] = React.useState("");
  const handleClose = () => {
    setOpen(false);
  };

  const copyToClipBoard = async (text) => {
    try {
      await navigator.clipboard.writeText(text);
      setCopyFeedback("Copied Successfully");
      setOpen(true);
    } catch (err) {
      console.log("INSIDE ", { open }, err);
      setCopyFeedback("Failed to copy. Please check browser persmissions");
      setOpen(true);
    }
  };

  return (
    <Tooltip
      open={open}
      onClose={handleClose}
      title={copyFeedback}
      leaveDelay={500}
    >
      <Button onClick={() => copyToClipBoard("Text to Copy")}>
        Controlled
      </Button>
    </Tooltip>
  );
}

sandbox