From b6343cb49eba94d4c816bef129ab97d894fae164 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Thu, 18 Sep 2025 14:17:43 +0800
Subject: [PATCH 1/6] refactor: remove useless structure

---
 src/Popup.tsx        | 26 ++++++------------
 src/Tooltip.tsx      | 63 ++++++++++++++++++++++++++++----------------
 tests/index.test.tsx | 10 +++----
 3 files changed, 54 insertions(+), 45 deletions(-)

diff --git a/src/Popup.tsx b/src/Popup.tsx
index 8f38a4b..03cf51c 100644
--- a/src/Popup.tsx
+++ b/src/Popup.tsx
@@ -12,26 +12,16 @@ export interface ContentProps {
 }
 
 const Popup: React.FC<ContentProps> = (props) => {
-  const {
-    children,
-    prefixCls,
-    id,
-    overlayInnerStyle: innerStyle,
-    bodyClassName,
-    className,
-    style,
-  } = props;
+  const { children, prefixCls, id, className, style, bodyClassName, overlayInnerStyle } = props;
 
   return (
-    <div className={classNames(`${prefixCls}-content`, className)} style={style}>
-      <div
-        className={classNames(`${prefixCls}-inner`, bodyClassName)}
-        id={id}
-        role="tooltip"
-        style={innerStyle}
-      >
-        {typeof children === 'function' ? children() : children}
-      </div>
+    <div
+      id={id}
+      className={classNames(`${prefixCls}-body`, className, bodyClassName)}
+      style={{ ...overlayInnerStyle, ...style }}
+      role="tooltip"
+    >
+      {typeof children === 'function' ? children() : children}
     </div>
   );
 };
diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
index bc14731..1c907c6 100644
--- a/src/Tooltip.tsx
+++ b/src/Tooltip.tsx
@@ -8,6 +8,8 @@ import { useImperativeHandle, useRef } from 'react';
 import { placements } from './placements';
 import Popup from './Popup';
 
+export type SemanticName = 'root' | 'arrow' | 'body';
+
 export interface TooltipProps
   extends Pick<
     TriggerProps,
@@ -21,30 +23,39 @@ export interface TooltipProps
     | 'forceRender'
     | 'popupVisible'
   > {
+  // Style
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+
+  /** Config popup motion */
+  motion?: TriggerProps['popupMotion'];
+
+  /** @deprecated Please use `styles={{ root: {} }}` */
+  overlayStyle?: React.CSSProperties;
+  /** @deprecated Please use `classNames={{ root: '' }}` */
+  overlayClassName?: string;
+  /** @deprecated Please use `styles={{ body: {} }}` */
+  overlayInnerStyle?: React.CSSProperties;
+
+  // Rest
   trigger?: ActionType | ActionType[];
   defaultVisible?: boolean;
   visible?: boolean;
   placement?: string;
-  /** Config popup motion */
-  motion?: TriggerProps['popupMotion'];
+
   onVisibleChange?: (visible: boolean) => void;
   afterVisibleChange?: (visible: boolean) => void;
   overlay: (() => React.ReactNode) | React.ReactNode;
-  /** @deprecated Please use `styles={{ root: {} }}` */
-  overlayStyle?: React.CSSProperties;
-  /** @deprecated Please use `classNames={{ root: '' }}` */
-  overlayClassName?: string;
+
   getTooltipContainer?: (node: HTMLElement) => HTMLElement;
   destroyOnHidden?: boolean;
   align?: AlignType;
   showArrow?: boolean | ArrowType;
   arrowContent?: React.ReactNode;
   id?: string;
-  /** @deprecated Please use `styles={{ body: {} }}` */
-  overlayInnerStyle?: React.CSSProperties;
+
   zIndex?: number;
-  styles?: TooltipStyles;
-  classNames?: TooltipClassNames;
+
   /**
    * Configures Tooltip to reuse the background for transition usage.
    * This is an experimental API and may not be stable.
@@ -52,16 +63,6 @@ export interface TooltipProps
   unique?: TriggerProps['unique'];
 }
 
-export interface TooltipStyles {
-  root?: React.CSSProperties;
-  body?: React.CSSProperties;
-}
-
-export interface TooltipClassNames {
-  root?: string;
-  body?: string;
-}
-
 export interface TooltipRef extends TriggerRef {}
 
 const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
@@ -108,7 +109,8 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
       prefixCls={prefixCls}
       id={mergedId}
       bodyClassName={tooltipClassNames?.body}
-      overlayInnerStyle={{ ...overlayInnerStyle, ...tooltipStyles?.body }}
+      overlayInnerStyle={overlayInnerStyle}
+      style={tooltipStyles?.body}
     >
       {overlay}
     </Popup>
@@ -124,6 +126,23 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
     return React.cloneElement<any>(children, childProps) as any;
   };
 
+  // Process arrow configuration
+  const getArrowConfig = () => {
+    if (!showArrow) {
+      return false;
+    }
+
+    // Convert true to object for unified processing
+    const arrowConfig = showArrow === true ? {} : showArrow;
+
+    // Apply semantic styles with unified logic
+    return {
+      ...arrowConfig,
+      className: classNames(arrowConfig.className, tooltipClassNames?.arrow),
+      content: arrowConfig.content || arrowContent,
+    };
+  };
+
   return (
     <Trigger
       popupClassName={classNames(overlayClassName, tooltipClassNames?.root)}
@@ -143,7 +162,7 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
       mouseLeaveDelay={mouseLeaveDelay}
       popupStyle={{ ...overlayStyle, ...tooltipStyles?.root }}
       mouseEnterDelay={mouseEnterDelay}
-      arrow={showArrow}
+      arrow={getArrowConfig()}
       {...extraProps}
     >
       {getChildren()}
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 9586008..bc4da49 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -1,6 +1,6 @@
 import { act, fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import Tooltip, { TooltipRef } from '../src';
+import Tooltip, { type TooltipRef } from '../src';
 
 const verifyContent = (wrapper: HTMLElement, content: string) => {
   expect(wrapper.querySelector('.x-content').textContent).toBe(content);
@@ -73,7 +73,7 @@ describe('rc-tooltip', () => {
       );
       fireEvent.click(container.querySelector('.target'));
       expect(
-        (container.querySelector('.rc-tooltip-inner') as HTMLElement).style.background,
+        (container.querySelector('.rc-tooltip-body') as HTMLElement).style.background,
       ).toEqual('red');
     });
 
@@ -269,11 +269,11 @@ describe('rc-tooltip', () => {
     );
 
     const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
-    const tooltipBodyElement = container.querySelector('.rc-tooltip-inner') as HTMLElement;
+    const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
 
     // 验证 classNames
-    expect(tooltipElement.classList).toContain('custom-root');
-    expect(tooltipBodyElement.classList).toContain('custom-body');
+    expect(tooltipElement).toHaveClass('custom-root');
+    expect(tooltipBodyElement).toHaveClass('custom-body');
 
     // 验证 styles
     expect(tooltipElement.style.backgroundColor).toBe('blue');

From 5cc870866c256a858bec9ffd0b40d03f46199af7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Thu, 18 Sep 2025 14:55:44 +0800
Subject: [PATCH 2/6] chore: align the case

---
 src/Popup.tsx   | 15 +++++-----
 src/Tooltip.tsx | 74 +++++++++++++++++++++----------------------------
 2 files changed, 39 insertions(+), 50 deletions(-)

diff --git a/src/Popup.tsx b/src/Popup.tsx
index 03cf51c..7537cab 100644
--- a/src/Popup.tsx
+++ b/src/Popup.tsx
@@ -1,24 +1,23 @@
-import classNames from 'classnames';
+import cls from 'classnames';
 import * as React from 'react';
+import type { TooltipProps } from './Tooltip';
 
 export interface ContentProps {
   prefixCls?: string;
   children: (() => React.ReactNode) | React.ReactNode;
   id?: string;
-  overlayInnerStyle?: React.CSSProperties;
-  className?: string;
-  style?: React.CSSProperties;
-  bodyClassName?: string;
+  classNames?: TooltipProps['classNames'];
+  styles?: TooltipProps['styles'];
 }
 
 const Popup: React.FC<ContentProps> = (props) => {
-  const { children, prefixCls, id, className, style, bodyClassName, overlayInnerStyle } = props;
+  const { children, prefixCls, id, classNames, styles } = props;
 
   return (
     <div
       id={id}
-      className={classNames(`${prefixCls}-body`, className, bodyClassName)}
-      style={{ ...overlayInnerStyle, ...style }}
+      className={cls(`${prefixCls}-body`, classNames?.body)}
+      style={styles.body}
       role="tooltip"
     >
       {typeof children === 'function' ? children() : children}
diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
index 1c907c6..abfaba1 100644
--- a/src/Tooltip.tsx
+++ b/src/Tooltip.tsx
@@ -2,7 +2,7 @@ import type { ArrowType, TriggerProps, TriggerRef } from '@rc-component/trigger'
 import Trigger from '@rc-component/trigger';
 import type { ActionType, AlignType } from '@rc-component/trigger/lib/interface';
 import useId from '@rc-component/util/lib/hooks/useId';
-import classNames from 'classnames';
+import cls from 'classnames';
 import * as React from 'react';
 import { useImperativeHandle, useRef } from 'react';
 import { placements } from './placements';
@@ -30,13 +30,6 @@ export interface TooltipProps
   /** Config popup motion */
   motion?: TriggerProps['popupMotion'];
 
-  /** @deprecated Please use `styles={{ root: {} }}` */
-  overlayStyle?: React.CSSProperties;
-  /** @deprecated Please use `classNames={{ root: '' }}` */
-  overlayClassName?: string;
-  /** @deprecated Please use `styles={{ body: {} }}` */
-  overlayInnerStyle?: React.CSSProperties;
-
   // Rest
   trigger?: ActionType | ActionType[];
   defaultVisible?: boolean;
@@ -67,11 +60,9 @@ export interface TooltipRef extends TriggerRef {}
 
 const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
   const {
-    overlayClassName,
     trigger = ['hover'],
     mouseEnterDelay = 0,
     mouseLeaveDelay = 0.1,
-    overlayStyle,
     prefixCls = 'rc-tooltip',
     children,
     onVisibleChange,
@@ -82,13 +73,12 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
     destroyOnHidden = false,
     defaultVisible,
     getTooltipContainer,
-    overlayInnerStyle,
     arrowContent,
     overlay,
     id,
     showArrow = true,
-    classNames: tooltipClassNames,
-    styles: tooltipStyles,
+    classNames,
+    styles,
     ...restProps
   } = props;
 
@@ -103,31 +93,9 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
     extraProps.popupVisible = props.visible;
   }
 
-  const getPopupElement = () => (
-    <Popup
-      key="content"
-      prefixCls={prefixCls}
-      id={mergedId}
-      bodyClassName={tooltipClassNames?.body}
-      overlayInnerStyle={overlayInnerStyle}
-      style={tooltipStyles?.body}
-    >
-      {overlay}
-    </Popup>
-  );
-
-  const getChildren = () => {
-    const child = React.Children.only(children);
-    const originalProps = child?.props || {};
-    const childProps = {
-      ...originalProps,
-      'aria-describedby': overlay ? mergedId : null,
-    };
-    return React.cloneElement<any>(children, childProps) as any;
-  };
-
+  // ========================= Arrow ==========================
   // Process arrow configuration
-  const getArrowConfig = () => {
+  const mergedArrow = React.useMemo(() => {
     if (!showArrow) {
       return false;
     }
@@ -138,16 +106,38 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
     // Apply semantic styles with unified logic
     return {
       ...arrowConfig,
-      className: classNames(arrowConfig.className, tooltipClassNames?.arrow),
+      className: cls(arrowConfig.className, classNames?.arrow),
       content: arrowConfig.content || arrowContent,
     };
+  }, [showArrow, classNames?.arrow, arrowContent]);
+
+  // ======================== Children ========================
+  const getChildren = () => {
+    const child = React.Children.only(children);
+    const originalProps = child?.props || {};
+    const childProps = {
+      ...originalProps,
+      'aria-describedby': overlay ? mergedId : null,
+    };
+    return React.cloneElement<any>(children, childProps) as any;
   };
 
+  // ========================= Render =========================
   return (
     <Trigger
-      popupClassName={classNames(overlayClassName, tooltipClassNames?.root)}
+      popupClassName={classNames?.root}
       prefixCls={prefixCls}
-      popup={getPopupElement}
+      popup={
+        <Popup
+          key="content"
+          prefixCls={prefixCls}
+          id={mergedId}
+          classNames={classNames}
+          styles={styles}
+        >
+          {overlay}
+        </Popup>
+      }
       action={trigger}
       builtinPlacements={placements}
       popupPlacement={placement}
@@ -160,9 +150,9 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
       defaultPopupVisible={defaultVisible}
       autoDestroy={destroyOnHidden}
       mouseLeaveDelay={mouseLeaveDelay}
-      popupStyle={{ ...overlayStyle, ...tooltipStyles?.root }}
+      popupStyle={styles?.root}
       mouseEnterDelay={mouseEnterDelay}
-      arrow={getArrowConfig()}
+      arrow={mergedArrow}
       {...extraProps}
     >
       {getChildren()}

From 25aa6e21acb7ae91ba68090f82d1015c4822f661 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Thu, 18 Sep 2025 15:43:15 +0800
Subject: [PATCH 3/6] chore: clean up

---
 package.json         |   2 +-
 src/Popup.tsx        |   2 +-
 src/Tooltip.tsx      |   5 +-
 tests/index.test.tsx | 285 +++++++++++++++++++++++++++++++++++++------
 4 files changed, 251 insertions(+), 43 deletions(-)

diff --git a/package.json b/package.json
index 380d3ce..57c19c7 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "test": "rc-test"
   },
   "dependencies": {
-    "@rc-component/trigger": "^3.6.0",
+    "@rc-component/trigger": "^3.6.4",
     "@rc-component/util": "^1.3.0",
     "classnames": "^2.3.1"
   },
diff --git a/src/Popup.tsx b/src/Popup.tsx
index 7537cab..04702ac 100644
--- a/src/Popup.tsx
+++ b/src/Popup.tsx
@@ -17,7 +17,7 @@ const Popup: React.FC<ContentProps> = (props) => {
     <div
       id={id}
       className={cls(`${prefixCls}-body`, classNames?.body)}
-      style={styles.body}
+      style={styles?.body}
       role="tooltip"
     >
       {typeof children === 'function' ? children() : children}
diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
index abfaba1..319915c 100644
--- a/src/Tooltip.tsx
+++ b/src/Tooltip.tsx
@@ -107,9 +107,10 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
     return {
       ...arrowConfig,
       className: cls(arrowConfig.className, classNames?.arrow),
-      content: arrowConfig.content || arrowContent,
+      style: { ...arrowConfig.style, ...styles?.arrow },
+      content: arrowConfig.content ?? arrowContent,
     };
-  }, [showArrow, classNames?.arrow, arrowContent]);
+  }, [showArrow, classNames?.arrow, styles?.arrow, arrowContent]);
 
   // ======================== Children ========================
   const getChildren = () => {
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index bc4da49..9f210b0 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -59,23 +59,7 @@ describe('rc-tooltip', () => {
       verifyContent(container, 'Tooltip content');
     });
 
-    // https://github.com/ant-design/ant-design/pull/23155
-    it('using style inner style', () => {
-      const { container } = render(
-        <Tooltip
-          trigger={['click']}
-          placement="left"
-          overlay={() => <strong className="x-content">Tooltip content</strong>}
-          overlayInnerStyle={{ background: 'red' }}
-        >
-          <div className="target">Click this</div>
-        </Tooltip>,
-      );
-      fireEvent.click(container.querySelector('.target'));
-      expect(
-        (container.querySelector('.rc-tooltip-body') as HTMLElement).style.background,
-      ).toEqual('red');
-    });
+
 
     it('access of ref', () => {
       const domRef = React.createRef<TooltipRef>();
@@ -216,6 +200,87 @@ describe('rc-tooltip', () => {
       );
       expect(container.querySelector('.rc-tooltip-arrow')).toBeFalsy();
     });
+
+    it('should merge arrow className from showArrow and classNames.arrow', () => {
+      const { container } = render(
+        <Tooltip
+          trigger={['click']}
+          placement="left"
+          overlay={<strong className="x-content">Tooltip content</strong>}
+          showArrow={{
+            className: 'from-showArrow',
+          }}
+          classNames={{
+            arrow: 'from-classNames',
+          }}
+          visible
+        >
+          <div className="target">Click this</div>
+        </Tooltip>,
+      );
+
+      const arrowElement = container.querySelector('.rc-tooltip-arrow');
+      expect(arrowElement).toHaveClass('from-showArrow');
+      expect(arrowElement).toHaveClass('from-classNames');
+    });
+
+    it('should use arrowContent from showArrow object', () => {
+      const { container } = render(
+        <Tooltip
+          trigger={['click']}
+          placement="left"
+          overlay={<strong className="x-content">Tooltip content</strong>}
+          showArrow={{
+            content: <span className="custom-arrow-content">↑</span>,
+          }}
+          visible
+        >
+          <div className="target">Click this</div>
+        </Tooltip>,
+      );
+
+      expect(container.querySelector('.custom-arrow-content')).toBeTruthy();
+      expect(container.querySelector('.custom-arrow-content').textContent).toBe('↑');
+    });
+
+    it('should use arrowContent prop when showArrow has no content', () => {
+      const { container } = render(
+        <Tooltip
+          trigger={['click']}
+          placement="left"
+          overlay={<strong className="x-content">Tooltip content</strong>}
+          showArrow
+          arrowContent={<span className="prop-arrow-content">→</span>}
+          visible
+        >
+          <div className="target">Click this</div>
+        </Tooltip>,
+      );
+
+      expect(container.querySelector('.prop-arrow-content')).toBeTruthy();
+      expect(container.querySelector('.prop-arrow-content').textContent).toBe('→');
+    });
+
+    it('should prioritize showArrow.content over arrowContent prop', () => {
+      const { container } = render(
+        <Tooltip
+          trigger={['click']}
+          placement="left"
+          overlay={<strong className="x-content">Tooltip content</strong>}
+          showArrow={{
+            content: <span className="showArrow-content">↑</span>,
+          }}
+          arrowContent={<span className="prop-content">→</span>}
+          visible
+        >
+          <div className="target">Click this</div>
+        </Tooltip>,
+      );
+
+      expect(container.querySelector('.showArrow-content')).toBeTruthy();
+      expect(container.querySelector('.prop-content')).toBeFalsy();
+      expect(container.querySelector('.showArrow-content').textContent).toBe('↑');
+    });
   });
 
   it('visible', () => {
@@ -251,33 +316,175 @@ describe('rc-tooltip', () => {
 
     expect(nodeRef.current.nativeElement).toBe(container.querySelector('button'));
   });
-  it('should apply custom styles to Tooltip', () => {
-    const customClassNames = {
-      body: 'custom-body',
-      root: 'custom-root',
-    };
+  describe('classNames and styles', () => {
+    it('should apply custom classNames to all semantic elements', () => {
+      const customClassNames = {
+        root: 'custom-root',
+        body: 'custom-body',
+        arrow: 'custom-arrow',
+      };
 
-    const customStyles = {
-      body: { color: 'red' },
-      root: { backgroundColor: 'blue' },
-    };
+      const { container } = render(
+        <Tooltip
+          classNames={customClassNames}
+          overlay={<div>Tooltip content</div>}
+          visible
+          showArrow
+        >
+          <button>Trigger</button>
+        </Tooltip>,
+      );
 
-    const { container } = render(
-      <Tooltip classNames={customClassNames} overlay={<div />} styles={customStyles} visible>
-        <button />
-      </Tooltip>,
-    );
+      const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
+      const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
+      const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow') as HTMLElement;
+
+      // 验证 classNames
+      expect(tooltipElement).toHaveClass('custom-root');
+      expect(tooltipBodyElement).toHaveClass('custom-body');
+      expect(tooltipArrowElement).toHaveClass('custom-arrow');
+    });
+
+    it('should apply custom styles to all semantic elements', () => {
+      const customStyles = {
+        root: { backgroundColor: 'blue', zIndex: 1000 },
+        body: { color: 'red', fontSize: '14px' },
+        arrow: { borderColor: 'green' },
+      };
+
+      const { container } = render(
+        <Tooltip
+          styles={customStyles}
+          overlay={<div>Tooltip content</div>}
+          visible
+          showArrow
+        >
+          <button>Trigger</button>
+        </Tooltip>,
+      );
+
+      const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
+      const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
+      const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow') as HTMLElement;
+
+      // 验证 styles
+      expect(tooltipElement.style.backgroundColor).toBe('blue');
+      expect(tooltipElement.style.zIndex).toBe('1000');
+      expect(tooltipBodyElement.style.color).toBe('red');
+      expect(tooltipBodyElement.style.fontSize).toBe('14px');
+      expect(tooltipArrowElement.style.borderColor).toBe('green');
+    });
 
-    const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
-    const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
+    it('should apply both classNames and styles simultaneously', () => {
+      const customClassNames = {
+        root: 'custom-root',
+        body: 'custom-body',
+        arrow: 'custom-arrow',
+      };
 
-    // 验证 classNames
-    expect(tooltipElement).toHaveClass('custom-root');
-    expect(tooltipBodyElement).toHaveClass('custom-body');
+      const customStyles = {
+        root: { backgroundColor: 'blue' },
+        body: { color: 'red' },
+        arrow: { borderColor: 'green' },
+      };
 
-    // 验证 styles
-    expect(tooltipElement.style.backgroundColor).toBe('blue');
-    expect(tooltipBodyElement.style.color).toBe('red');
+      const { container } = render(
+        <Tooltip
+          classNames={customClassNames}
+          styles={customStyles}
+          overlay={<div>Tooltip content</div>}
+          visible
+          showArrow
+        >
+          <button>Trigger</button>
+        </Tooltip>,
+      );
+
+      const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
+      const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
+      const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow') as HTMLElement;
+
+      // 验证 classNames 和 styles 同时生效
+      expect(tooltipElement).toHaveClass('custom-root');
+      expect(tooltipElement.style.backgroundColor).toBe('blue');
+      expect(tooltipBodyElement).toHaveClass('custom-body');
+      expect(tooltipBodyElement.style.color).toBe('red');
+      expect(tooltipArrowElement).toHaveClass('custom-arrow');
+      expect(tooltipArrowElement.style.borderColor).toBe('green');
+    });
+
+    it('should work with partial classNames and styles', () => {
+      const partialClassNames = {
+        body: 'custom-body',
+      };
+
+      const partialStyles = {
+        root: { backgroundColor: 'blue' },
+      };
+
+      const { container } = render(
+        <Tooltip
+          classNames={partialClassNames}
+          styles={partialStyles}
+          overlay={<div>Tooltip content</div>}
+          visible
+          showArrow
+        >
+          <button>Trigger</button>
+        </Tooltip>,
+      );
+
+      const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
+      const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
+      const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow') as HTMLElement;
+
+      // 验证部分配置生效
+      expect(tooltipElement.style.backgroundColor).toBe('blue');
+      expect(tooltipBodyElement).toHaveClass('custom-body');
+      
+      // 验证未配置的不会有自定义类名或样式
+      expect(tooltipElement).not.toHaveClass('custom-root');
+      expect(tooltipArrowElement).not.toHaveClass('custom-arrow');
+    });
+
+    it('should not break when showArrow is false', () => {
+      const customClassNames = {
+        root: 'custom-root',
+        body: 'custom-body',
+        arrow: 'custom-arrow', // 即使配置了arrow，但不显示箭头时不应该报错
+      };
+
+      const customStyles = {
+        root: { backgroundColor: 'blue' },
+        body: { color: 'red' },
+        arrow: { borderColor: 'green' },
+      };
+
+      const { container } = render(
+        <Tooltip
+          classNames={customClassNames}
+          styles={customStyles}
+          overlay={<div>Tooltip content</div>}
+          visible
+          showArrow={false}
+        >
+          <button>Trigger</button>
+        </Tooltip>,
+      );
+
+      const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
+      const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
+      const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow');
+
+      // 验证没有箭头时
+      expect(tooltipArrowElement).toBeFalsy();
+      
+      // 其他样式仍然生效
+      expect(tooltipElement).toHaveClass('custom-root');
+      expect(tooltipElement.style.backgroundColor).toBe('blue');
+      expect(tooltipBodyElement).toHaveClass('custom-body');
+      expect(tooltipBodyElement.style.color).toBe('red');
+    });
   });
 
   describe('children handling', () => {

From 209358271865241ad731d16df3cd8e038dfc12cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Thu, 18 Sep 2025 15:46:12 +0800
Subject: [PATCH 4/6] chore: eng trans

---
 tests/index.test.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 9f210b0..d09f635 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -339,7 +339,7 @@ describe('rc-tooltip', () => {
       const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
       const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow') as HTMLElement;
 
-      // 验证 classNames
+      // Verify classNames
       expect(tooltipElement).toHaveClass('custom-root');
       expect(tooltipBodyElement).toHaveClass('custom-body');
       expect(tooltipArrowElement).toHaveClass('custom-arrow');
@@ -367,7 +367,7 @@ describe('rc-tooltip', () => {
       const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
       const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow') as HTMLElement;
 
-      // 验证 styles
+      // Verify styles
       expect(tooltipElement.style.backgroundColor).toBe('blue');
       expect(tooltipElement.style.zIndex).toBe('1000');
       expect(tooltipBodyElement.style.color).toBe('red');
@@ -404,7 +404,7 @@ describe('rc-tooltip', () => {
       const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
       const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow') as HTMLElement;
 
-      // 验证 classNames 和 styles 同时生效
+      // Verify that classNames and styles work simultaneously
       expect(tooltipElement).toHaveClass('custom-root');
       expect(tooltipElement.style.backgroundColor).toBe('blue');
       expect(tooltipBodyElement).toHaveClass('custom-body');
@@ -438,11 +438,11 @@ describe('rc-tooltip', () => {
       const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
       const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow') as HTMLElement;
 
-      // 验证部分配置生效
+      // Verify partial configuration takes effect
       expect(tooltipElement.style.backgroundColor).toBe('blue');
       expect(tooltipBodyElement).toHaveClass('custom-body');
       
-      // 验证未配置的不会有自定义类名或样式
+      // Verify that unconfigured elements don't have custom class names or styles
       expect(tooltipElement).not.toHaveClass('custom-root');
       expect(tooltipArrowElement).not.toHaveClass('custom-arrow');
     });
@@ -476,10 +476,10 @@ describe('rc-tooltip', () => {
       const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
       const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow');
 
-      // 验证没有箭头时
+      // Verify when arrow is not shown
       expect(tooltipArrowElement).toBeFalsy();
       
-      // 其他样式仍然生效
+      // Other styles still take effect
       expect(tooltipElement).toHaveClass('custom-root');
       expect(tooltipElement.style.backgroundColor).toBe('blue');
       expect(tooltipBodyElement).toHaveClass('custom-body');
@@ -522,7 +522,7 @@ describe('rc-tooltip', () => {
       const btn = container.querySelector('button');
       expect(btn).toHaveClass('custom-btn');
 
-      // 触发原始事件处理器
+      // Trigger original event handler
       fireEvent.mouseEnter(btn);
       expect(onMouseEnter).toHaveBeenCalled();
     });

From 83802c9fcf31d721360a200453966ad53b0e967a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Thu, 18 Sep 2025 15:49:25 +0800
Subject: [PATCH 5/6] test: update test

---
 tests/index.test.tsx | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index d09f635..fd6511a 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -368,11 +368,9 @@ describe('rc-tooltip', () => {
       const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow') as HTMLElement;
 
       // Verify styles
-      expect(tooltipElement.style.backgroundColor).toBe('blue');
-      expect(tooltipElement.style.zIndex).toBe('1000');
-      expect(tooltipBodyElement.style.color).toBe('red');
-      expect(tooltipBodyElement.style.fontSize).toBe('14px');
-      expect(tooltipArrowElement.style.borderColor).toBe('green');
+      expect(tooltipElement).toHaveStyle({ backgroundColor: 'blue', zIndex: '1000' });
+      expect(tooltipBodyElement).toHaveStyle({ color: 'red', fontSize: '14px' });
+      expect(tooltipArrowElement).toHaveStyle({ borderColor: 'green' });
     });
 
     it('should apply both classNames and styles simultaneously', () => {
@@ -406,11 +404,11 @@ describe('rc-tooltip', () => {
 
       // Verify that classNames and styles work simultaneously
       expect(tooltipElement).toHaveClass('custom-root');
-      expect(tooltipElement.style.backgroundColor).toBe('blue');
+      expect(tooltipElement).toHaveStyle({ backgroundColor: 'blue' });
       expect(tooltipBodyElement).toHaveClass('custom-body');
-      expect(tooltipBodyElement.style.color).toBe('red');
+      expect(tooltipBodyElement).toHaveStyle({ color: 'red' });
       expect(tooltipArrowElement).toHaveClass('custom-arrow');
-      expect(tooltipArrowElement.style.borderColor).toBe('green');
+      expect(tooltipArrowElement).toHaveStyle({ borderColor: 'green' });
     });
 
     it('should work with partial classNames and styles', () => {
@@ -439,7 +437,7 @@ describe('rc-tooltip', () => {
       const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow') as HTMLElement;
 
       // Verify partial configuration takes effect
-      expect(tooltipElement.style.backgroundColor).toBe('blue');
+      expect(tooltipElement).toHaveStyle({ backgroundColor: 'blue' });
       expect(tooltipBodyElement).toHaveClass('custom-body');
       
       // Verify that unconfigured elements don't have custom class names or styles
@@ -481,9 +479,9 @@ describe('rc-tooltip', () => {
       
       // Other styles still take effect
       expect(tooltipElement).toHaveClass('custom-root');
-      expect(tooltipElement.style.backgroundColor).toBe('blue');
+      expect(tooltipElement).toHaveStyle({ backgroundColor: 'blue' });
       expect(tooltipBodyElement).toHaveClass('custom-body');
-      expect(tooltipBodyElement.style.color).toBe('red');
+      expect(tooltipBodyElement).toHaveStyle({ color: 'red' });
     });
   });
 

From bf086d29f3e074d9b42e21bcd339988288c6ca0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Thu, 18 Sep 2025 15:55:46 +0800
Subject: [PATCH 6/6] fix: ts

---
 docs/examples/formError.tsx | 2 +-
 docs/examples/placement.tsx | 4 ++--
 docs/examples/point.tsx     | 2 +-
 docs/examples/simple.tsx    | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/examples/formError.tsx b/docs/examples/formError.tsx
index 68f12a0..4c31f96 100644
--- a/docs/examples/formError.tsx
+++ b/docs/examples/formError.tsx
@@ -34,7 +34,7 @@ class Test extends Component {
             visible={this.state.visible}
             motion={{ motionName: 'rc-tooltip-zoom' }}
             trigger={[]}
-            overlayStyle={{ zIndex: 1000 }}
+            styles={{ root: { zIndex: 1000 } }}
             overlay={<span>required!</span>}
           >
             <input onChange={this.handleChange} />
diff --git a/docs/examples/placement.tsx b/docs/examples/placement.tsx
index 087a065..e23454e 100644
--- a/docs/examples/placement.tsx
+++ b/docs/examples/placement.tsx
@@ -94,8 +94,8 @@ const Test: React.FC = () => (
       <h5>Debug Usage</h5>
       <Popup
         prefixCls="rc-tooltip"
-        className="rc-tooltip-placement-top"
-        style={{ display: 'inline-block', position: 'relative' }}
+        classNames={{ body: 'rc-tooltip-placement-top' }}
+        styles={{ body: { display: 'inline-block', position: 'relative' } }}
       >
         Test
       </Popup>
diff --git a/docs/examples/point.tsx b/docs/examples/point.tsx
index 8850763..c476249 100644
--- a/docs/examples/point.tsx
+++ b/docs/examples/point.tsx
@@ -30,7 +30,7 @@ const Test: React.FC = () => {
           <Tooltip
             placement="top"
             overlay={text}
-            overlayInnerStyle={{ width: 300, height: 50 }}
+            styles={{ body: { width: 300, height: 50 } }}
             popupVisible
             arrowContent={<div className="rc-tooltip-arrow-inner" />}
           >
diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx
index 60afc2f..b3700c1 100644
--- a/docs/examples/simple.tsx
+++ b/docs/examples/simple.tsx
@@ -217,7 +217,7 @@ class Test extends Component<any, TestState> {
               offset: [this.state.offsetX, this.state.offsetY],
             }}
             motion={{ motionName: this.state.transitionName }}
-            overlayInnerStyle={state.overlayInnerStyle}
+            styles={{ body: state.overlayInnerStyle }}
           >
             <div style={{ height: 100, width: 100, border: '1px solid red' }}>trigger</div>
           </Tooltip>