From c4eb499cd994bd8b1323316306ae8c54c78f77a3 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Mon, 26 Dec 2022 12:50:04 +0800
Subject: [PATCH] fix(console): tooltip should point to box center of the
 checkbox (#2726)

---
 .../src/components/Checkbox/index.module.scss |  7 ++++-
 .../console/src/components/Checkbox/index.tsx | 26 +++++++++----------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/console/src/components/Checkbox/index.module.scss b/packages/console/src/components/Checkbox/index.module.scss
index 0786110e1..40e28db94 100644
--- a/packages/console/src/components/Checkbox/index.module.scss
+++ b/packages/console/src/components/Checkbox/index.module.scss
@@ -12,7 +12,6 @@
   .icon {
     width: 20px;
     height: 20px;
-    margin-right: _.unit(2);
 
     .border {
       fill: var(--color-text-secondary);
@@ -51,6 +50,12 @@
     cursor: pointer;
   }
 
+  .tooltipAnchor {
+    display: flex;
+    align-items: center;
+    margin-right: _.unit(2);
+  }
+
   .label {
     font: var(--font-body-medium);
     color: var(--color-text);
diff --git a/packages/console/src/components/Checkbox/index.tsx b/packages/console/src/components/Checkbox/index.tsx
index 4da3082a1..d5370bff4 100644
--- a/packages/console/src/components/Checkbox/index.tsx
+++ b/packages/console/src/components/Checkbox/index.tsx
@@ -51,16 +51,16 @@ const Checkbox = ({
 
   return (
     <div className={classNames(styles.checkbox, disabled && styles.disabled, className)}>
-      <Tooltip horizontalAlign="start" content={tooltip}>
-        <div
-          aria-checked={checked}
-          className={styles.wrapper}
-          role="checkbox"
-          tabIndex={0}
-          onClick={handleChange}
-          onKeyDown={onKeyDownHandler(handleChange)}
-        >
-          <input type="checkbox" checked={checked} disabled={disabled} name={name} />
+      <div
+        aria-checked={checked}
+        className={styles.wrapper}
+        role="checkbox"
+        tabIndex={0}
+        onClick={handleChange}
+        onKeyDown={onKeyDownHandler(handleChange)}
+      >
+        <input type="checkbox" checked={checked} disabled={disabled} name={name} />
+        <Tooltip horizontalAlign="start" content={tooltip} anchorClassName={styles.tooltipAnchor}>
           <svg
             className={classNames(
               styles.icon,
@@ -104,9 +104,9 @@ const Checkbox = ({
               />
             )}
           </svg>
-          {label && <span className={styles.label}>{label}</span>}
-        </div>
-      </Tooltip>
+        </Tooltip>
+        {label && <span className={styles.label}>{label}</span>}
+      </div>
     </div>
   );
 };