fix(ranking): 鼠标无法移动到提示

XYShaoKang · Feb 8, 2023 · da04b0f · da04b0f
1 parent 80bdaee
commit da04b0f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/content/components/ToolTip.tsx b/src/content/components/ToolTip.tsx
@@ -19,6 +19,7 @@ export interface TooltipOwnerProps {
   icon?: ReactElement
   delay?: number
   children: React.ReactElement<any, any>
+  keep?: boolean
 }
 
 export const ToolTip: StyledComponent<TooltipOwnerProps & PopperProps, 'span'> =
@@ -32,12 +33,16 @@ export const ToolTip: StyledComponent<TooltipOwnerProps & PopperProps, 'span'> =
       arrow: arrowProp,
       icon,
       delay,
+      keep,
       children,
       ...props
     }: SCProps<TooltipOwnerProps & PopperProps, AsC>,
     ref: ForwardedRef<AsC>
   ) {
     const [setHoverRef, hover] = useHover<HTMLElement>(delay ?? 100)
+    const [setPopperHoverRef, popperHover] = useHover(delay ?? 100, [
+      ref as any,
+    ])
 
     const childrenRef = useRef<HTMLElement>()
 
@@ -49,7 +54,7 @@ export const ToolTip: StyledComponent<TooltipOwnerProps & PopperProps, 'span'> =
 
     let open = openProp
     if (openProp === undefined) {
-      open = !!(title && hover)
+      open = !!title && (hover || (keep && popperHover))
     }
     let arrow = arrowProp
     if (arrowProp === undefined) {
@@ -64,11 +69,13 @@ export const ToolTip: StyledComponent<TooltipOwnerProps & PopperProps, 'span'> =
             placement={placement}
             anchorEl={childrenRef.current}
             {...props}
-            ref={ref}
+            ref={setPopperHoverRef}
             arrow={arrow}
           >
-            {icon}
-            {title}
+            <>
+              {icon}
+              {title}
+            </>
           </Popper>
         ) : null}
       </>

diff --git a/src/content/pages/ranking/Title.tsx b/src/content/pages/ranking/Title.tsx
@@ -31,6 +31,7 @@ const Help = () => {
     <ToolTip
       placement="bottom"
       arrow={true}
+      keep={true}
       title={
         <Content>
           预测数据来自