feat: ConfigProvider support tooltip (#51872)

* feat: ConfigProvider support tooltip

* fix

* fix

* fix

* refactor: inner to body

* revert SemanticPreview update

* fix

* clear unused

* update Semantic demo

* update locale content descrption

.dumi/components/SemanticPreview.tsx

@@ -111,12 +111,14 @@ const SemanticPreview: React.FC<SemanticPreviewProps> = (props) => {
       const targetElement = containerRef.current?.querySelector<HTMLElement>(`.${targetClassName}`);
       const containerRect = containerRef.current?.getBoundingClientRect();
       const targetRect = targetElement?.getBoundingClientRect();
+
       setMarkPos([
         (targetRect?.left || 0) - (containerRect?.left || 0),
         (targetRect?.top || 0) - (containerRect?.top || 0),
         targetRect?.width || 0,
         targetRect?.height || 0,
       ]);
+
       timerRef.current = setTimeout(() => {
         setPositionMotion(true);
       }, 10);

components/config-provider/context.ts

@@ -34,6 +34,7 @@ import type { TourProps } from '../tour/interface';
 import type { TransferProps } from '../transfer';
 import type { TreeSelectProps } from '../tree-select';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
+import type { TooltipProps } from '../tooltip';
 
 export const defaultPrefixCls = 'ant';
 export const defaultIconPrefixCls = 'anticon';
@@ -176,6 +177,8 @@ export type SelectConfig = ComponentStyleConfig & Pick<SelectProps, 'showSearch'
 
 export type SpaceConfig = ComponentStyleConfig & Pick<SpaceProps, 'size' | 'classNames' | 'styles'>;
 
+export type TooltipConfig = Pick<TooltipProps, 'className' | 'style' | 'styles' | 'classNames'>;
+
 export type SpinConfig = ComponentStyleConfig & Pick<SpinProps, 'indicator'>;
 
 export type InputNumberConfig = ComponentStyleConfig & Pick<InputNumberProps, 'variant'>;
@@ -289,6 +292,7 @@ export interface ConfigConsumerProps {
   timeline?: ComponentStyleConfig;
   timePicker?: TimePickerConfig;
   tour?: TourConfig;
+  tooltip?: TooltipConfig;
   upload?: ComponentStyleConfig;
   notification?: NotificationConfig;
   tree?: ComponentStyleConfig;

components/config-provider/index.en-US.md

@@ -162,6 +162,7 @@ const {
 | timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tour | Set Tour common props | { closeIcon?: React.ReactNode } | - | 5.14.0 |
+| tooltip | Set Tooltip common props | { className?: string, style?: React.CSSProperties, classNames?:[Tooltip\["classNames"\]](/components/tooltip-cn#api), styles?: [Tooltip\["styles"\]](/components/tooltip#api) } | - | 5.23.0 |
 | transfer | Set Transfer common props | { className?: string, style?: React.CSSProperties, selectionsIcon?: React.ReactNode } | - | 5.7.0, selectionsIcon: 5.14.0 |
 | tree | Set Tree common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -51,6 +51,7 @@ import type {
   Theme,
   ThemeConfig,
   TimePickerConfig,
+  TooltipConfig,
   TourConfig,
   TransferConfig,
   TreeSelectConfig,
@@ -235,6 +236,7 @@ export interface ConfigProviderProps {
    */
   wave?: WaveConfig;
   tour?: TourConfig;
+  tooltip?: TooltipConfig;
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -389,6 +391,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     dropdown,
     warning: warningConfig,
     tour,
+    tooltip,
     floatButtonGroup,
     variant,
     inputNumber,
@@ -489,6 +492,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     dropdown,
     warning: warningConfig,
     tour,
+    tooltip,
     floatButtonGroup,
     variant,
     inputNumber,

components/config-provider/index.zh-CN.md

@@ -164,6 +164,7 @@ const {
 | timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | timePicker | 设置 TimePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tour | 设置 Tour 组件的通用属性 | { closeIcon?: React.ReactNode } | - | 5.14.0 |
+| tooltip | 设置 Tooltip 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?:[Tooltip\["classNames"\]](/components/tooltip-cn#api), styles?: [Tooltip\["styles"\]](/components/tooltip-cn#api) } | - | 5.23.0 |
 | transfer | 设置 Transfer 组件的通用属性 | { className?: string, style?: React.CSSProperties, selectionsIcon?: React.ReactNode } | - | 5.7.0, selectionsIcon: 5.14.0 |
 | tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/menu/MenuItem.tsx

@@ -116,7 +116,7 @@ const MenuItem: GenericComponent = (props) => {
       <Tooltip
         {...tooltipProps}
         placement={direction === 'rtl' ? 'left' : 'right'}
-        overlayClassName={`${prefixCls}-inline-collapsed-tooltip`}
+        classNames={{ root: `${prefixCls}-inline-collapsed-tooltip` }}
       >
         {returnNode}
       </Tooltip>

components/tooltip/__tests__/tooltip.test.tsx

@@ -601,4 +601,33 @@ describe('Tooltip', () => {
     expect(error).toHaveBeenCalled();
     error.mockRestore();
   });
+
+  it('should apply custom styles to Tooltip', () => {
+    const customClassNames = {
+      body: 'custom-body',
+      root: 'custom-root',
+    };
+
+    const customStyles = {
+      body: { color: 'red' },
+      root: { backgroundColor: 'blue' },
+    };
+
+    const { container } = render(
+      <Tooltip classNames={customClassNames} overlay={<div />} styles={customStyles} visible>
+        <button type="button">button</button>
+      </Tooltip>,
+    );
+
+    const tooltipElement = container.querySelector('.ant-tooltip') as HTMLElement;
+    const tooltipBodyElement = container.querySelector('.ant-tooltip-inner') as HTMLElement;
+
+    // 验证 classNames
+    expect(tooltipElement.classList).toContain('custom-root');
+    expect(tooltipBodyElement.classList).toContain('custom-body');
+
+    // 验证 styles
+    expect(tooltipElement.style.backgroundColor).toBe('blue');
+    expect(tooltipBodyElement.style.color).toBe('red');
+  });
 });

components/tooltip/demo/_semantic.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Tooltip } from 'antd';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+const locales = {
+  cn: {
+    root: '根节点 (包含箭头、内容元素)',
+    body: '内容元素',
+  },
+  en: {
+    root: 'Root element (including arrows, content elements)',
+    body: 'Body element',
+  },
+};
+
+const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
+  const divRef = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div ref={divRef} style={{ position: 'absolute', marginTop: 60 }}>
+      <Tooltip
+        title="prompt text"
+        open
+        placement="top"
+        autoAdjustOverflow={false}
+        getPopupContainer={() => divRef.current}
+        {...props}
+      />
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+  return (
+    <SemanticPreview
+      semantics={[
+        { name: 'root', desc: locale.root, version: '5.23.0' },
+        { name: 'body', desc: locale.body, version: '5.23.0' },
+      ]}
+    >
+      <BlockList />
+    </SemanticPreview>
+  );
+};
+
+export default App;

components/tooltip/demo/config-debug.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+debug config provide
+
+## en-US
+
+debug config provide

components/tooltip/demo/config-debug.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ConfigProvider, Tooltip } from 'antd';
+
+const App: React.FC = () => (
+  <div>
+    <ConfigProvider
+      tooltip={{
+        className: 'cutsom-tooltip-test',
+        style: { background: 'yellow' },
+        styles: { body: { color: 'red', borderRadius: 50 }, root: { color: 'green' } },
+        classNames: { root: 'custom-root', body: 'custom-body' },
+      }}
+    >
+      <Tooltip title="prompt text">
+        <span>Tooltip will show on mouse enter.</span>
+      </Tooltip>
+    </ConfigProvider>
+  </div>
+);
+
+export default App;

components/tooltip/index.en-US.md

@@ -41,6 +41,10 @@ Common props ref：[Common props](/docs/react/common-props)
 
 <embed src="./shared/sharedProps.en-US.md"></embed>
 
+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## Design Token
 
 <ComponentTokenTable component="Tooltip"></ComponentTokenTable>

components/tooltip/index.tsx

@@ -91,6 +91,14 @@ interface LegacyTooltipProps
 }
 
 export interface AbstractTooltipProps extends LegacyTooltipProps {
+  styles?: {
+    root?: React.CSSProperties;
+    body?: React.CSSProperties;
+  };
+  classNames?: {
+    root?: string;
+    body?: string;
+  };
   style?: React.CSSProperties;
   className?: string;
   rootClassName?: string;
@@ -130,7 +138,6 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
     prefixCls: customizePrefixCls,
     openClassName,
     getTooltipContainer,
-    overlayClassName,
     color,
     overlayInnerStyle,
     children,
@@ -153,6 +160,7 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
     getPopupContainer: getContextPopupContainer,
     getPrefixCls,
     direction,
+    tooltip,
   } = React.useContext(ConfigContext);
 
   // ============================== Ref ===============================
@@ -181,6 +189,10 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
       ['onVisibleChange', 'onOpenChange'],
       ['afterVisibleChange', 'afterOpenChange'],
       ['arrowPointAtCenter', 'arrow={{ pointAtCenter: true }}'],
+      // todo: Warnings are not available yet, because popover and popconfirm are still in use. Wait until they are merged before processing.
+      // ['overlayStyle', 'styles={{ root: {} }}'],
+      // ['overlayInnerStyle', 'styles={{ body: {} }}'],
+      // ['overlayClassName', 'classNames={{ root: {} }}'],
     ].forEach(([deprecatedName, newName]) => {
       warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
     });
@@ -253,6 +265,9 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
     mouseLeaveDelay = 0.1,
     overlayStyle,
     rootClassName,
+    overlayClassName,
+    styles,
+    classNames: tooltipClassNames,
     ...otherProps
   } = props;
 
@@ -282,12 +297,8 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
   // Color
   const colorInfo = parseColor(prefixCls, color);
   const arrowContentStyle = colorInfo.arrowStyle;
-  const formattedOverlayInnerStyle: React.CSSProperties = {
-    ...overlayInnerStyle,
-    ...colorInfo.overlayStyle,
-  };
 
-  const customOverlayClassName = classNames(
+  const rootClassNames = classNames(
     overlayClassName,
     {
       [`${prefixCls}-rtl`]: direction === 'rtl',
@@ -296,8 +307,13 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
     rootClassName,
     hashId,
     cssVarCls,
+    tooltip?.className,
+    tooltip?.classNames?.root,
+    tooltipClassNames?.root,
   );
 
+  const bodyClassnames = classNames(tooltip?.classNames?.body, tooltipClassNames?.body);
+
   // ============================ zIndex ============================
   const [zIndex, contextZIndex] = useZIndex('Tooltip', otherProps.zIndex);
 
@@ -310,8 +326,22 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
       mouseEnterDelay={mouseEnterDelay}
       mouseLeaveDelay={mouseLeaveDelay}
       prefixCls={prefixCls}
-      overlayClassName={customOverlayClassName}
-      overlayStyle={{ ...arrowContentStyle, ...overlayStyle }}
+      classNames={{ root: rootClassNames, body: bodyClassnames }}
+      styles={{
+        root: {
+          ...arrowContentStyle,
+          ...tooltip?.styles?.root,
+          ...tooltip?.style,
+          ...overlayStyle,
+          ...styles?.root,
+        },
+        body: {
+          ...tooltip?.styles?.body,
+          ...overlayInnerStyle,
+          ...styles?.body,
+          ...colorInfo.overlayStyle,
+        },
+      }}
       getTooltipContainer={getPopupContainer || getTooltipContainer || getContextPopupContainer}
       ref={tooltipRef}
       builtinPlacements={tooltipPlacements}
@@ -319,7 +349,6 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
       visible={tempOpen}
       onVisibleChange={onOpenChange}
       afterVisibleChange={afterOpenChange ?? afterVisibleChange}
-      overlayInnerStyle={formattedOverlayInnerStyle}
       arrowContent={<span className={`${prefixCls}-arrow-content`} />}
       motion={{
         motionName: getTransitionName(rootPrefixCls, 'zoom-big-fast', props.transitionName),

components/tooltip/index.zh-CN.md

@@ -30,6 +30,7 @@ demo:
 <code src="./demo/debug.tsx" debug>Debug</code>
 <code src="./demo/disabled.tsx">禁用</code>
 <code src="./demo/disabled-children.tsx" debug>禁用子元素</code>
+<code src="./demo/config-debug.tsx" debug>ConfigProvider</code>
 
 ## API
 
@@ -43,6 +44,10 @@ demo:
 
 <embed src="./shared/sharedProps.zh-CN.md"></embed>
 
+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## 主题变量（Design Token）
 
 <ComponentTokenTable component="Tooltip"></ComponentTokenTable>

package.json

@@ -147,7 +147,7 @@
     "rc-table": "~7.49.0",
     "rc-tabs": "~15.5.0",
     "rc-textarea": "~1.8.2",
-    "rc-tooltip": "~6.2.1",
+    "rc-tooltip": "~6.3.2",
     "rc-tree": "~5.10.1",
     "rc-tree-select": "~5.24.5",
     "rc-upload": "~4.8.1",