Fix/tooltip customized render

common/changes/@visactor/vchart/fix-tooltip-customized-render_2025-05-27-07-51.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: customized render of tooltip should be render in react 17 and react 18\n\n",
+      "type": "none",
+      "packageName": "@visactor/vchart"
+    }
+  ],
+  "packageName": "@visactor/vchart",
+  "email": "dingling112@gmail.com"
+}

packages/react-vchart/src/charts/BaseChart.tsx

@@ -149,6 +149,7 @@ const BaseChart: React.FC<Props> = React.forwardRef((props, ref) => {
   const specFromChildren = useRef<Omit<ISpec, 'type' | 'data' | 'width' | 'height'>>(null);
   const eventsBinded = React.useRef<BaseChartProps>(null);
   const skipFunctionDiff = !!props.skipFunctionDiff;
+  const [tooltipNode, setTooltipNode] = useState<ReactNode>(null);
 
   const parseSpec = (props: Props) => {
     let spec: ISpec;
@@ -169,7 +170,7 @@ const BaseChart: React.FC<Props> = React.forwardRef((props, ref) => {
       } as ISpec;
     }
 
-    const tooltipSpec = initCustomTooltip(props, spec.tooltip);
+    const tooltipSpec = initCustomTooltip(setTooltipNode, props, spec.tooltip);
     if (tooltipSpec) {
       spec.tooltip = tooltipSpec;
     }
@@ -294,6 +295,7 @@ const BaseChart: React.FC<Props> = React.forwardRef((props, ref) => {
             </React.Fragment>
           );
         })}
+        {tooltipNode}
       </ViewContext.Provider>
     </RootChartContext.Provider>
   );

packages/react-vchart/src/components/tooltip/util.tsx

@@ -1,13 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import React from 'react';
 import type { BaseChartProps } from '../../charts/BaseChart';
 import type { TooltipProps, TooltipRender } from './interface';
 import type { ITooltipSpec } from '@visactor/vchart';
 import { REACT_TOOLTIP_ClASS_NAME } from './constant';
-import { createRoot } from 'react-dom/client';
-import { render as reactRender } from 'react-dom';
+import { createPortal } from 'react-dom';
 
 /** tooltip 自定义插槽 */
-export const initCustomTooltip = (props: BaseChartProps, spec?: TooltipProps) => {
+export const initCustomTooltip = (
+  setTooltipNode: React.Dispatch<React.SetStateAction<React.ReactNode>>,
+  props: BaseChartProps,
+  spec?: TooltipProps
+) => {
   let render: TooltipRender;
   if (spec?.tooltipRender) {
     render = spec.tooltipRender;
@@ -44,28 +48,9 @@ export const initCustomTooltip = (props: BaseChartProps, spec?: TooltipProps) =>
           }
         }
 
-        let container = el.querySelector(`.${REACT_TOOLTIP_ClASS_NAME}`);
-        if (!container) {
-          // eslint-disable-next-line no-undef
-          container = document.createElement('div');
-          container.className = REACT_TOOLTIP_ClASS_NAME;
-          el.appendChild(container);
-        }
-        const element = render(el, actualTooltip, params);
-        const finalElement = React.isValidElement(element) ? element : <React.Fragment>{element}</React.Fragment>;
-
-        if (createRoot) {
-          if ((container as any).reactRoot) {
-            (container as any).reactRoot.render(finalElement);
-          } else {
-            const root = createRoot(container);
-            (container as any).reactRoot = root;
-            root.render(finalElement);
-          }
-        } else {
-          // react 17 以及以下
-          reactRender(finalElement, container);
-        }
+        setTooltipNode(
+          createPortal(<div className={REACT_TOOLTIP_ClASS_NAME}>{render(el, actualTooltip, params)}</div>, el)
+        );
       }
     } as ITooltipSpec;
   }

packages/react-vchart/src/containers/withContainer.tsx

@@ -5,6 +5,7 @@ export interface ContainerProps {
   className?: string;
   width?: number | string;
   height?: number | string;
+  id?: string;
 }
 
 export default function withContainer<Props extends ContainerProps, CompProps>(
@@ -15,7 +16,7 @@ export default function withContainer<Props extends ContainerProps, CompProps>(
   const Cls = React.forwardRef<any, CompProps & Props>((props: CompProps & Props, ref) => {
     const container = useRef();
     const [inited, setInited] = useState(false);
-    const { className, style, width, ...options } = props;
+    const { className, style, width, height, id, ...options } = props;
 
     useLayoutEffect(() => {
       setInited(true);
@@ -24,11 +25,12 @@ export default function withContainer<Props extends ContainerProps, CompProps>(
     return (
       <div
         ref={container}
+        id={id}
         className={className}
         style={{
           position: 'relative',
-          height: props.height || '100%',
-          width: props.width || '100%',
+          height: height || '100%',
+          width: width || '100%',
           ...style
         }}
       >