refactor: update Tooltip component to use 'open' prop for visibility control

Author: aojunhao123

src/Tooltip.tsx

@@ -23,12 +23,12 @@ export interface TooltipProps
   > {
   trigger?: ActionType | ActionType[];
   defaultVisible?: boolean;
-  visible?: boolean;
+  open?: boolean;
   placement?: string;
   /** Config popup motion */
   motion?: TriggerProps['popupMotion'];
-  onOpenChange?: (visible: boolean) => void;
-  afterOpenChange?: (visible: boolean) => void;
+  onOpenChange?: (open: boolean) => void;
+  afterOpenChange?: (open: boolean) => void;
   overlay: (() => React.ReactNode) | React.ReactNode;
   /** @deprecated Please use `styles={{ root: {} }}` */
   overlayStyle?: React.CSSProperties;
@@ -83,6 +83,7 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
     showArrow = true,
     classNames: tooltipClassNames,
     styles: tooltipStyles,
+    open,
     ...restProps
   } = props;
 
@@ -91,11 +92,6 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
 
   useImperativeHandle(ref, () => triggerRef.current);
 
-  const extraProps: Partial<TooltipProps & TriggerProps> = { ...restProps };
-  if ('visible' in props) {
-    extraProps.popupVisible = props.visible;
-  }
-
   const getPopupElement = () => (
     <Popup
       key="content"
@@ -140,7 +136,8 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
       popupStyle={{ ...overlayStyle, ...tooltipStyles?.root }}
       mouseEnterDelay={mouseEnterDelay}
       arrow={showArrow}
-      {...extraProps}
+      popupVisible={open}
+      {...restProps}
     >
       {getChildren()}
     </Trigger>

tests/index.test.tsx

@@ -222,7 +222,7 @@ describe('rc-tooltip', () => {
     const App = () => {
       const [open, setOpen] = React.useState(false);
       return (
-        <Tooltip overlay={<strong className="x-content">Tooltip content</strong>} visible={open}>
+        <Tooltip overlay={<strong className="x-content">Tooltip content</strong>} open={open}>
           <div
             className="target"
             onClick={() => {
@@ -263,7 +263,7 @@ describe('rc-tooltip', () => {
     };
 
     const { container } = render(
-      <Tooltip classNames={customClassNames} overlay={<div />} styles={customStyles} visible>
+      <Tooltip classNames={customClassNames} overlay={<div />} styles={customStyles} open>
         <button />
       </Tooltip>,
     );