Merge pull request #849 from oceanbase/dengfuping-dev

fix(design): mouseFollow Tooltip should inherit `.ant-tooltip` className
oceanbase · Nov 20, 2024 · 7ce97f8 · 7ce97f8
2 parents 32f4371 + 24b2e14
commit 7ce97f8
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/packages/design/src/tooltip/MouseTooltip.tsx b/packages/design/src/tooltip/MouseTooltip.tsx
@@ -83,10 +83,10 @@ const MouseTooltip: React.FC<MouseTooltipProps> = ({
             boxShadow: token.boxShadowSecondary,
             borderRadius: token.borderRadius,
             // @ts-ignore
-            color: textColor || token.Tooltip.colorTextLightSolid || token.colorTextLightSolid,
+            color: textColor || token.Tooltip?.colorTextLightSolid || token.colorTextLightSolid,
             backgroundColor:
               // @ts-ignore
-              backgroundColor || token.Tooltip.colorBgSpotlight || token.colorBgSpotlight,
+              backgroundColor || token.Tooltip?.colorBgSpotlight || token.colorBgSpotlight,
             left: isOverWidth ? clientX - tooltipWidth - offset : clientX + offset,
             top: isOverHeight ? clientY - tooltipHeight - offset : clientY + offset,
             ...restOverlayInnerStyle,

diff --git a/packages/design/src/tooltip/__tests__/index.test.tsx b/packages/design/src/tooltip/__tests__/index.test.tsx
@@ -179,4 +179,17 @@ describe('Tooltip', () => {
     expect(isTooltipOpen()).toBeFalsy();
     expect(container.querySelector('.ant-tooltip-open')).toBeNull();
   });
+
+  it('mouseFollow Tooltip should inherit `.ant-tooltip` className', async () => {
+    const { container } = render(
+      <Tooltip title="This is prompt text" mouseFollow={true}>
+        <div id="hello">Hello world!</div>
+      </Tooltip>
+    );
+
+    const divElement = container.querySelector('#hello');
+    fireEvent.mouseEnter(divElement!);
+    await waitFakeTimer();
+    expect(container.querySelector('.ant-tooltip')).not.toBeNull();
+  });
 });
diff --git a/packages/design/src/tooltip/demo/mouse-follow.tsx b/packages/design/src/tooltip/demo/mouse-follow.tsx
@@ -38,7 +38,7 @@ const App: React.FC = () => {
         </Col>
         <Col span={12}>
           <Tooltip
-            title="This is prompt text. This is prompt text. This is prompt text. This is prompt text."
+            title="This is prompt text. This is prompt text. This is prompt text. This is prompt text. This is prompt text."
             type={type}
             mouseFollow={true}
           >

diff --git a/packages/design/src/tooltip/index.tsx b/packages/design/src/tooltip/index.tsx
@@ -59,7 +59,8 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>(
     const prefixCls = getPrefixCls('tooltip', customizePrefixCls);
     const { wrapSSR, hashId } = useStyle(prefixCls);
 
-    const tooltipCls = classNames(className, hashId);
+    const tooltipCls = classNames(className);
+    const mouseTooltipCls = classNames(prefixCls, className, hashId);
     const [innerOpen, setInnerOpen] = useState(open ?? visible ?? defaultOpen ?? defaultVisible);
 
     // 同步 ant-design noTitle 逻辑
@@ -108,7 +109,7 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>(
             color: typeItem?.color,
             ...overlayInnerStyle,
           }}
-          className={tooltipCls}
+          className={mouseTooltipCls}
           overlay={overlay}
           {...restProps}
         >