tooltip in enable modal (#146)

ui/src/console/modals/Enable.js

@@ -1,13 +1,20 @@
 import Modal from "react-bootstrap/Modal";
 import {mdiContentCopy} from "@mdi/js";
 import Icon from "@mdi/react";
+import {useRef, useState} from "react";
+import {Overlay, Tooltip} from "react-bootstrap";
 
 const Enable = (props) => {
+    const target = useRef(null);
+    const [showTooltip, setShowTooltip] = useState(false);
+
     const handleCopy = async () => {
         let copiedText = document.getElementById("zrok-enable-command").innerHTML;
         try {
             await navigator.clipboard.writeText(copiedText);
-            props.onHide();
+
+            setShowTooltip(true);
+            setTimeout(() => setShowTooltip(false), 1000);
 
         } catch(err) {
             console.error("failed to copy", err);
@@ -15,16 +22,25 @@ const Enable = (props) => {
     }
 
     return (
+        <div>
             <Modal show={props.show} onHide={props.onHide} centered>
                 <Modal.Header closeButton>Enable Your Environment</Modal.Header>
                 <Modal.Body>
                     <p>To enable your shell for zrok, use this command:</p>
                     <pre>
                     $ <span id={"zrok-enable-command"}>zrok enable {props.token}</span>{' '}
-                    <Icon path={mdiContentCopy} size={0.7} onClick={handleCopy}/>
+                        <Icon ref={target} path={mdiContentCopy} size={0.7} onClick={handleCopy}/>
                 </pre>
                 </Modal.Body>
             </Modal>
+            <Overlay target={target.current} show={showTooltip} placement={"bottom"}>
+                {(props) => (
+                    <Tooltip id={"copy-tooltip"} {...props}>
+                        Copied!
+                    </Tooltip>
+                )}
+            </Overlay>
+        </div>
     );
 }
 

ui/src/register/Success.js

@@ -14,7 +14,7 @@ const Success = (props) => {
             console.log("copied enable command");
 
             setShowTooltip(true);
-            setTimeout(() => setShowTooltip(false), 2000);
+            setTimeout(() => setShowTooltip(false), 1000);
 
         } catch(err) {
             console.error("failed to copy", err);