Estoy tratando de crear un botón que copie en el contenido del portapapeles desde la variable usando TypeScript y Material-UI. Intenté esto:
const [copySuccess, setCopySuccess] = useState(''); const copyToClipBoard = async (text: string) => { try { await navigator.clipboard.writeText(copyMe); setCopySuccess('Copied!'); } catch (err) { setCopySuccess('Failed to copy!'); } };Botón para llamar al código anterior:
<Button onClick={() => copyToClipBoard('some text to copy')} > Copy Url </Button>¿Sabe cómo puedo agregar información sobre herramientas https://mui.com/components/tooltips/ sobre el botón para mostrar el mensaje de copia exitosa cuando se copia el texto?
Puede usar la versión controlled de la información sobre herramientas de MUI para abrir y cerrar manualmente la información sobre herramientas en algún evento.
El código actualizado podría ser similar al siguiente para mostrar y ocultar la información sobre herramientas.
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> ); }