From be4c18d3dd6e5aeae0129e04e775cae05516a476 Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Thu, 28 Nov 2024 17:40:44 +0800
Subject: [PATCH 1/4] feat: supports classnames & styles

---
 src/Popup.tsx        | 11 +++++++++--
 src/Tooltip.tsx      | 27 ++++++++++++++++++++++++---
 tests/index.test.tsx | 31 +++++++++++++++++++++++++++++++
 3 files changed, 64 insertions(+), 5 deletions(-)

diff --git a/src/Popup.tsx b/src/Popup.tsx
index cbaa9cf..361dc72 100644
--- a/src/Popup.tsx
+++ b/src/Popup.tsx
@@ -8,14 +8,21 @@ export interface ContentProps {
   overlayInnerStyle?: React.CSSProperties;
   className?: string;
   style?: React.CSSProperties;
+  overlayInnerClassName?: string;
 }
 
 export default function Popup(props: ContentProps) {
-  const { children, prefixCls, id, overlayInnerStyle, className, style } = props;
+  const { children, prefixCls, id, overlayInnerStyle, overlayInnerClassName, className, style } =
+    props;
 
   return (
     <div className={classNames(`${prefixCls}-content`, className)} style={style}>
-      <div className={`${prefixCls}-inner`} id={id} role="tooltip" style={overlayInnerStyle}>
+      <div
+        className={classNames(`${prefixCls}-inner`, overlayInnerClassName)}
+        id={id}
+        role="tooltip"
+        style={overlayInnerStyle}
+      >
         {typeof children === 'function' ? children() : children}
       </div>
     </div>
diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
index 7f218d6..dbe1c19 100644
--- a/src/Tooltip.tsx
+++ b/src/Tooltip.tsx
@@ -5,6 +5,7 @@ import * as React from 'react';
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { placements } from './placements';
 import Popup from './Popup';
+import classNames from 'classnames';
 
 export interface TooltipProps
   extends Pick<
@@ -42,6 +43,18 @@ export interface TooltipProps
   id?: string;
   overlayInnerStyle?: React.CSSProperties;
   zIndex?: number;
+  styles?: TootipStyles;
+  classNames?: TooltipClassNames;
+}
+
+export interface TootipStyles {
+  root?: React.CSSProperties;
+  inner?: React.CSSProperties;
+}
+
+export interface TooltipClassNames {
+  root?: string;
+  inner?: string;
 }
 
 export interface TooltipRef extends TriggerRef {}
@@ -70,6 +83,8 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
     overlay,
     id,
     showArrow = true,
+    classNames: tooltipClassNames,
+    styles: tooltipStyles,
     ...restProps
   } = props;
 
@@ -82,14 +97,20 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
   }
 
   const getPopupElement = () => (
-    <Popup key="content" prefixCls={prefixCls} id={id} overlayInnerStyle={overlayInnerStyle}>
+    <Popup
+      key="content"
+      prefixCls={prefixCls}
+      id={id}
+      overlayInnerClassName={tooltipClassNames?.inner}
+      overlayInnerStyle={{ ...overlayInnerStyle, ...tooltipStyles?.inner }}
+    >
       {overlay}
     </Popup>
   );
 
   return (
     <Trigger
-      popupClassName={overlayClassName}
+      popupClassName={classNames(overlayClassName, tooltipClassNames?.root)}
       prefixCls={prefixCls}
       popup={getPopupElement}
       action={trigger}
@@ -106,7 +127,7 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
       defaultPopupVisible={defaultVisible}
       autoDestroy={destroyTooltipOnHide}
       mouseLeaveDelay={mouseLeaveDelay}
-      popupStyle={overlayStyle}
+      popupStyle={{ ...overlayStyle, ...tooltipStyles?.root }}
       mouseEnterDelay={mouseEnterDelay}
       arrow={showArrow}
       {...extraProps}
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 9541285..47efcfb 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -251,4 +251,35 @@ describe('rc-tooltip', () => {
 
     expect(nodeRef.current.nativeElement).toBe(container.querySelector('button'));
   });
+  it('should apply custom styles to Tooltip', () => {
+    const customClassNames = {
+      inner: 'custom-inner',
+      root: 'custom-root',
+    };
+
+    const customStyles = {
+      inner: { color: 'red' },
+      root: { backgroundColor: 'blue' },
+    };
+
+    const { container } = render(
+      <Tooltip classNames={customClassNames} overlay={<div />} styles={customStyles} visible>
+        <button />
+      </Tooltip>,
+    );
+
+    const tooltipElement = container.querySelector('.rc-tooltip');
+    const tooltipInnerElement = container.querySelector('.rc-tooltip-inner');
+
+    // 验证 classNames
+    expect(tooltipElement.classList).toContain('custom-root');
+    expect(tooltipInnerElement.classList).toContain('custom-inner');
+
+    // 验证 styles
+    const tooltipElementStyle = getComputedStyle(tooltipElement);
+    const tooltipInnerElementStyle = getComputedStyle(tooltipInnerElement);
+
+    expect(tooltipElementStyle.backgroundColor).toBe('blue');
+    expect(tooltipInnerElementStyle.color).toBe('red');
+  });
 });

From 83ad8a3da9ab91c8ea115c6c100e80fce5f80f45 Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Thu, 28 Nov 2024 18:00:17 +0800
Subject: [PATCH 2/4] fix

---
 src/Tooltip.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
index dbe1c19..cb3e7bc 100644
--- a/src/Tooltip.tsx
+++ b/src/Tooltip.tsx
@@ -43,11 +43,11 @@ export interface TooltipProps
   id?: string;
   overlayInnerStyle?: React.CSSProperties;
   zIndex?: number;
-  styles?: TootipStyles;
+  styles?: TooltipStyles;
   classNames?: TooltipClassNames;
 }
 
-export interface TootipStyles {
+export interface TooltipStyles {
   root?: React.CSSProperties;
   inner?: React.CSSProperties;
 }

From d8f8ae9ca9677d62baa3ff46a497ff99e31f9d9b Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Thu, 28 Nov 2024 20:56:22 +0800
Subject: [PATCH 3/4] improve test

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

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 47efcfb..917136c 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -268,18 +268,15 @@ describe('rc-tooltip', () => {
       </Tooltip>,
     );
 
-    const tooltipElement = container.querySelector('.rc-tooltip');
-    const tooltipInnerElement = container.querySelector('.rc-tooltip-inner');
+    const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
+    const tooltipInnerElement = container.querySelector('.rc-tooltip-inner') as HTMLElement;
 
     // 验证 classNames
     expect(tooltipElement.classList).toContain('custom-root');
     expect(tooltipInnerElement.classList).toContain('custom-inner');
 
     // 验证 styles
-    const tooltipElementStyle = getComputedStyle(tooltipElement);
-    const tooltipInnerElementStyle = getComputedStyle(tooltipInnerElement);
-
-    expect(tooltipElementStyle.backgroundColor).toBe('blue');
-    expect(tooltipInnerElementStyle.color).toBe('red');
+    expect(tooltipElement.style.backgroundColor).toBe('blue');
+    expect(tooltipInnerElement.style.color).toBe('red');
   });
 });

From 4691dbbb0c3d14d89e2f1a8ebaa2a27bc6eead64 Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Fri, 29 Nov 2024 10:54:39 +0800
Subject: [PATCH 4/4] update classname

---
 src/Popup.tsx   | 8 ++++----
 src/Tooltip.tsx | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Popup.tsx b/src/Popup.tsx
index 361dc72..7e19976 100644
--- a/src/Popup.tsx
+++ b/src/Popup.tsx
@@ -8,20 +8,20 @@ export interface ContentProps {
   overlayInnerStyle?: React.CSSProperties;
   className?: string;
   style?: React.CSSProperties;
-  overlayInnerClassName?: string;
+  innerClassName?: string;
 }
 
 export default function Popup(props: ContentProps) {
-  const { children, prefixCls, id, overlayInnerStyle, overlayInnerClassName, className, style } =
+  const { children, prefixCls, id, overlayInnerStyle: innerStyle, innerClassName, className, style } =
     props;
 
   return (
     <div className={classNames(`${prefixCls}-content`, className)} style={style}>
       <div
-        className={classNames(`${prefixCls}-inner`, overlayInnerClassName)}
+        className={classNames(`${prefixCls}-inner`, innerClassName)}
         id={id}
         role="tooltip"
-        style={overlayInnerStyle}
+        style={innerStyle}
       >
         {typeof children === 'function' ? children() : children}
       </div>
diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
index cb3e7bc..395019d 100644
--- a/src/Tooltip.tsx
+++ b/src/Tooltip.tsx
@@ -101,7 +101,7 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
       key="content"
       prefixCls={prefixCls}
       id={id}
-      overlayInnerClassName={tooltipClassNames?.inner}
+      innerClassName={tooltipClassNames?.inner}
       overlayInnerStyle={{ ...overlayInnerStyle, ...tooltipStyles?.inner }}
     >
       {overlay}