fix(console): tooltip should point to box center of the checkbox (#2726)

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);

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>
   );
 };