diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
index fc67dcb..c4948aa 100644
--- a/src/Tooltip.tsx
+++ b/src/Tooltip.tsx
@@ -26,6 +26,8 @@ export interface TooltipProps extends Pick<
   | 'prefixCls'
   | 'forceRender'
   | 'popupVisible'
+  | 'popupClassName'
+  | 'popupStyle'
 > {
   children: React.ReactElement;
   // Style
@@ -133,7 +135,6 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
   // ========================= Render =========================
   return (
     <Trigger
-      popupClassName={classNames?.root}
       prefixCls={prefixCls}
       popup={
         <Popup
@@ -158,12 +159,13 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
       defaultPopupVisible={defaultVisible}
       autoDestroy={destroyOnHidden}
       mouseLeaveDelay={mouseLeaveDelay}
-      popupStyle={styles?.root}
       mouseEnterDelay={mouseEnterDelay}
       arrow={mergedArrow}
       uniqueContainerClassName={classNames?.uniqueContainer}
       uniqueContainerStyle={styles?.uniqueContainer}
       {...extraProps}
+      popupClassName={clsx(classNames?.root, extraProps.popupClassName)}
+      popupStyle={{ ...styles?.root, ...extraProps.popupStyle }}
     >
       {getChildren}
     </Trigger>
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index e4af8bf..6919e36 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -431,6 +431,29 @@ describe('rc-tooltip', () => {
       expect(tooltipArrowElement).toHaveStyle({ borderColor: 'green' });
     });
 
+    it('should merge classNames.root and popupClassName, and styles.root and popupStyle', () => {
+      const { container } = render(
+        <Tooltip
+          overlay={<span>content</span>}
+          visible
+          popupClassName="legacy-popup"
+          classNames={{ root: 'semantic-root' }}
+          popupStyle={{ color: 'red' }}
+          styles={{ root: { backgroundColor: 'blue' } }}
+        >
+          <span>target</span>
+        </Tooltip>,
+      );
+
+      const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
+      expect(tooltipElement).toHaveClass('legacy-popup');
+      expect(tooltipElement).toHaveClass('semantic-root');
+      expect(tooltipElement).toHaveStyle({
+        color: 'red',
+        backgroundColor: 'blue',
+      });
+    });
+
     it('should work with partial classNames and styles', () => {
       const partialClassNames = {
         container: 'custom-container',