feat: Add tooltip/title so function of icon buttons will be clear (#3154

) feat: Add tooltip/title for icon buttons
nervosnetwork · Jun 6, 2024 · 24624ee · 24624ee · github-actions · Jun 6, 2024
1 parent f6b48b8
commit 24624ee
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 19 deletions.
diff --git a/packages/neuron-ui/src/components/CellManagement/cellManagement.module.scss b/packages/neuron-ui/src/components/CellManagement/cellManagement.module.scss
@@ -51,13 +51,14 @@
 }
 
 .actions {
+  display: flex;
+  gap: 16px;
   & > svg {
     cursor: pointer;
     &[data-disabled='true'] {
       cursor: not-allowed;
       opacity: 50%;
     }
-    margin-right: 16px;
   }
 }
 

diff --git a/packages/neuron-ui/src/components/CellManagement/index.tsx b/packages/neuron-ui/src/components/CellManagement/index.tsx
@@ -186,28 +186,36 @@ const getColumns = ({
         const { locked, lockedReason } = item
         return (
           <div className={styles.actions}>
-            <DetailIcon onClick={onAction} data-action={Actions.View} data-index={index} />
+            <Tooltip tip={t('history.detail')} showTriangle placement="top">
+              <DetailIcon onClick={onAction} data-action={Actions.View} data-index={index} />
+            </Tooltip>
             {locked ? (
-              <UnLock
-                data-disabled={!!lockedReason}
-                onClick={onAction}
-                data-action={Actions.Unlock}
-                data-index={index}
-              />
+              <Tooltip tip={t('cell-manage.unlock')} showTriangle placement="top">
+                <UnLock
+                  data-disabled={!!lockedReason}
+                  onClick={onAction}
+                  data-action={Actions.Unlock}
+                  data-index={index}
+                />
+              </Tooltip>
             ) : (
-              <LockCell
-                data-disabled={!!lockedReason}
-                onClick={onAction}
-                data-action={Actions.Lock}
+              <Tooltip tip={t('cell-manage.lock')} showTriangle placement="top">
+                <LockCell
+                  data-disabled={!!lockedReason}
+                  onClick={onAction}
+                  data-action={Actions.Lock}
+                  data-index={index}
+                />
+              </Tooltip>
+            )}
+            <Tooltip tip={t('cell-manage.consume')} showTriangle placement="top">
+              <Consume
+                data-disabled={!!locked}
+                onClick={locked ? undefined : onAction}
+                data-action={Actions.Consume}
                 data-index={index}
               />
-            )}
-            <Consume
-              data-disabled={!!locked}
-              onClick={locked ? undefined : onAction}
-              data-action={Actions.Consume}
-              data-index={index}
-            />
+            </Tooltip>
           </div>
         )
       },