From 65545c78c6fadbc839633ffbf3864393b8965af7 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Fri, 14 Jul 2023 20:45:06 +0800
Subject: [PATCH] chore: add tooltip to buttons

---
 web/src/components/GenerateQRCodeDialog.tsx |  2 +-
 web/src/components/ShortcutView.tsx         | 28 ++++++++++++---------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/web/src/components/GenerateQRCodeDialog.tsx b/web/src/components/GenerateQRCodeDialog.tsx
index 7adb18b..6148a30 100644
--- a/web/src/components/GenerateQRCodeDialog.tsx
+++ b/web/src/components/GenerateQRCodeDialog.tsx
@@ -37,7 +37,7 @@ const GenerateQRCodeDialog: React.FC<Props> = (props: Props) => {
     <Modal open={true}>
       <ModalDialog>
         <div className="flex flex-row justify-between items-center w-64 mb-4">
-          <span className="text-lg font-medium">Download QR Code</span>
+          <span className="text-lg font-medium">QR Code</span>
           <Button variant="plain" onClick={handleCloseBtnClick}>
             <Icon.X className="w-5 h-auto text-gray-600" />
           </Button>
diff --git a/web/src/components/ShortcutView.tsx b/web/src/components/ShortcutView.tsx
index 74e7092..f9e9700 100644
--- a/web/src/components/ShortcutView.tsx
+++ b/web/src/components/ShortcutView.tsx
@@ -79,18 +79,22 @@ const ShortcutView = (props: Props) => {
                 <Icon.ExternalLink className="w-4 h-auto text-gray-600" />
               </span>
             </a>
-            <button
-              className="hidden group-hover:block w-6 h-6 cursor-pointer rounded-full text-gray-500 hover:bg-gray-100 hover:shadow hover:text-blue-600"
-              onClick={() => handleCopyButtonClick()}
-            >
-              <Icon.Clipboard className="w-4 h-auto mx-auto" />
-            </button>
-            <button
-              className="hidden group-hover:block ml-1 w-6 h-6 cursor-pointer rounded-full text-gray-500 hover:bg-gray-100 hover:shadow hover:text-blue-600"
-              onClick={() => setShowQRCodeDialog(true)}
-            >
-              <Icon.QrCode className="w-4 h-auto mx-auto" />
-            </button>
+            <Tooltip title="Copy" variant="solid" placement="top" arrow>
+              <button
+                className="hidden group-hover:block w-6 h-6 cursor-pointer rounded-full text-gray-500 hover:bg-gray-100 hover:shadow hover:text-blue-600"
+                onClick={() => handleCopyButtonClick()}
+              >
+                <Icon.Clipboard className="w-4 h-auto mx-auto" />
+              </button>
+            </Tooltip>
+            <Tooltip title="QR Code" variant="solid" placement="top" arrow>
+              <button
+                className="hidden group-hover:block ml-1 w-6 h-6 cursor-pointer rounded-full text-gray-500 hover:bg-gray-100 hover:shadow hover:text-blue-600"
+                onClick={() => setShowQRCodeDialog(true)}
+              >
+                <Icon.QrCode className="w-4 h-auto mx-auto" />
+              </button>
+            </Tooltip>
           </div>
           <div className="flex flex-row justify-end items-center space-x-2">
             {havePermission && (