fix: 修改引导提示指向问题

yuque · Oct 26, 2023 · 1ea07f8 · 1ea07f8
1 parent 13861f4
commit 1ea07f8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/src/components/SuperSideBar/container/Header/index.module.less b/src/components/SuperSideBar/container/Header/index.module.less
@@ -40,7 +40,10 @@
         width: 16px;
         height: 16px;
         cursor: pointer;
-        font-size: 16px;
+        display: flex;
+        align-items: center;
+        font-size: @font-size-lg;
+        position: relative;
 
         .avatar {
           width: 100%;
@@ -57,6 +60,7 @@
 }
 
 .tooltipWrapper {
+  cursor: text;
   &::before {
     position: absolute;
     width: 12px;
@@ -66,7 +70,7 @@
     border-radius: 50%;
     content: '';
     top: -8px;
-    right: 18px;
+    right: 14px;
     animation: breathing 1s infinite;
   }
 
@@ -78,13 +82,13 @@
     border-radius: 50%;
     content: '';
     top: -6px;
-    right: 20px;
+    right: 16px;
     animation: breathing 1s infinite reverse;
   }
 
   :global {
     .yuque-chrome-extension-tooltip-arrow {
-      transform: translateX(-4px);
+      transform: translateY(-2px);
       &::before {
         background-color: @blue-5;
       }
@@ -95,8 +99,7 @@
     }
 
     .yuque-chrome-extension-tooltip-content {
-      transform: translateX(6px) translateY(16px);
-
+      transform: translateY(14px);
       .yuque-chrome-extension-tooltip-inner {
         background-color: @blue-5;
       }

diff --git a/src/components/SuperSideBar/container/Header/index.tsx b/src/components/SuperSideBar/container/Header/index.tsx
@@ -65,10 +65,11 @@ function SuperSidebarHeader() {
                 />
               </span>
             }
-            placement="bottomLeft"
+            placement="bottomRight"
             open={showTip}
             overlayClassName={styles.tooltipWrapper}
-            getPopupContainer={node => node.parentNode as HTMLElement}
+            getPopupContainer={node => node as HTMLElement}
+            arrow={{ pointAtCenter: true }}
           >
             <div className={styles.itemWrapper} onClick={openSetting}>
               <Icon component={SettingSvg} />