feat: support disabled prop (#534)

Author: zombieJ

README.md

@@ -69,6 +69,7 @@ Then open `http://localhost:8000`.
 | `classNames`          | `Partial<Record<SemanticName, string>>`              | -                   | Semantic class names for root, arrow, and container nodes. |
 | `defaultVisible`      | boolean                                              | -                   | Initial uncontrolled visible state.                        |
 | `destroyOnHidden`     | boolean                                              | false               | Destroy popup DOM when hidden.                             |
+| `disabled`            | boolean                                              | false               | Temporarily hide tooltip while preserving visible state.   |
 | `fresh`               | boolean                                              | -                   | Keep popup content fresh when closed.                      |
 | `getTooltipContainer` | `(node: HTMLElement) => HTMLElement`                 | -                   | Resolve popup container.                                   |
 | `id`                  | string                                               | generated id        | Tooltip id used for accessibility.                         |

docs/demo/disabled.md

@@ -0,0 +1,12 @@
+---
+title: Disabled
+order: 9
+---
+
+Hover the button to show the Tooltip. Click it to toggle `disabled`.
+
+```jsx
+import DisabledDemo from '../examples/disabled';
+
+export default () => <DisabledDemo />;
+```

docs/examples/disabled.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import '../../assets/bootstrap.less';
+import Tooltip from '../../src';
+
+const DisabledDemo = () => {
+  const [disabled, setDisabled] = useState(false);
+
+  return (
+    <div style={{ margin: 100 }}>
+      <Tooltip disabled={disabled} overlay="Tooltip content" placement="top">
+        <button type="button" onClick={() => setDisabled((value) => !value)}>
+          {disabled ? 'Enable Tooltip' : 'Disable Tooltip'}
+        </button>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default DisabledDemo;

package.json

@@ -45,7 +45,7 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@rc-component/trigger": "^3.7.1",
+    "@rc-component/trigger": "^3.10.0",
     "@rc-component/util": "^1.11.1",
     "clsx": "^2.1.1"
   },

src/Tooltip.tsx

@@ -19,6 +19,7 @@ export interface TooltipProps extends Pick<
   TriggerProps,
   | 'onPopupAlign'
   | 'builtinPlacements'
+  | 'disabled'
   | 'fresh'
   | 'mouseLeaveDelay'
   | 'mouseEnterDelay'

tests/index.test.tsx

@@ -304,6 +304,32 @@ describe('rc-tooltip', () => {
     expect(container.querySelector('.x-content')).toBeTruthy();
   });
 
+  it('temporarily hides while disabled and restores without mouse leave', () => {
+    const App = () => {
+      const [disabled, setDisabled] = React.useState(false);
+
+      return (
+        <Tooltip disabled={disabled} overlay="Tooltip content">
+          <button type="button" onClick={() => setDisabled((value) => !value)}>
+            Toggle disabled
+          </button>
+        </Tooltip>
+      );
+    };
+
+    const { container } = render(<App />);
+    const button = container.querySelector('button');
+
+    fireEvent.mouseEnter(button);
+    expect(container.querySelector('.rc-tooltip')).not.toHaveClass('rc-tooltip-hidden');
+
+    fireEvent.click(button);
+    expect(container.querySelector('.rc-tooltip')).toHaveClass('rc-tooltip-hidden');
+
+    fireEvent.click(button);
+    expect(container.querySelector('.rc-tooltip')).not.toHaveClass('rc-tooltip-hidden');
+  });
+
   it('ref support nativeElement', () => {
     const nodeRef = React.createRef<TooltipRef>();