add a tooltip to api token (#270)

divviup · Jul 8, 2023 · f6c5490 · f6c5490
1 parent 566980a
commit f6c5490
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/app/src/api-tokens/ApiTokenList.tsx b/app/src/api-tokens/ApiTokenList.tsx
@@ -30,6 +30,8 @@ import FormGroup from "react-bootstrap/FormGroup";
 import InputGroup from "react-bootstrap/InputGroup";
 import Modal from "react-bootstrap/Modal";
 import Placeholder from "react-bootstrap/Placeholder";
+import OverlayTrigger from "react-bootstrap/OverlayTrigger";
+import Tooltip from "react-bootstrap/Tooltip";
 
 export default function ApiTokens() {
   const navigation = useNavigation();
@@ -226,14 +228,16 @@ function Token({ token }: { token: string | null }) {
   }, [setCopied, token]);
 
   return (
-    <>
+    <OverlayTrigger
+      overlay={<Tooltip>{copied ? "Copied!" : "Click to copy"}</Tooltip>}
+    >
       <span onClick={copy} style={{ cursor: "pointer" }}>
         <code className="user-select-all">{token}</code>{" "}
         <Button size="sm" variant="outline-secondary" className="ml-auto">
           {copied ? <ClipboardCheckFill /> : <Clipboard />}
         </Button>
       </span>
-    </>
+    </OverlayTrigger>
   );
 }