feat: support disabled prop

Author: zombieJ

README.md

@@ -71,6 +71,7 @@ Online demo: https://tooltip-react-component.vercel.app/
 | trigger             | string \| string\[]                                                | 'hover'             | which actions cause tooltip shown. enum of 'hover','click','focus'                                                                                               |
 | visible             | boolean                                                            | false               | whether tooltip is visible                                                                                                                                       |
 | defaultVisible      | boolean                                                            | false               | whether tooltip is visible by default                                                                                                                            |
+| disabled            | boolean                                                            | false               | temporarily hide tooltip without resetting its current visible state                                                                                             |
 | placement           | string                                                             | 'right'             | tooltip placement. enum of 'top','left','right','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom' |
 | motion              | object                                                             |                     | Config popup motion. Please ref demo for example                                                                                                                 |
 | onVisibleChange     | (visible: boolean) => void;                                        |                     | Callback when visible change                                                                                                                                     |

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

@@ -41,8 +41,8 @@
     "test": "rc-test"
   },
   "dependencies": {
-    "@rc-component/trigger": "^3.7.1",
-    "@rc-component/util": "^1.3.0",
+    "@rc-component/trigger": "^3.10.0",
+    "@rc-component/util": "^1.11.0",
     "clsx": "^2.1.1"
   },
   "devDependencies": {

src/Tooltip.tsx

@@ -1,7 +1,12 @@
-import type { ArrowType, TriggerProps, TriggerRef } from '@rc-component/trigger';
+import type {
+  ActionType,
+  AlignType,
+  ArrowType,
+  TriggerProps,
+  TriggerRef,
+} from '@rc-component/trigger';
 import Trigger from '@rc-component/trigger';
-import type { ActionType, AlignType } from '@rc-component/trigger/lib/interface';
-import useId from '@rc-component/util/lib/hooks/useId';
+import { useId } from '@rc-component/util';
 import { clsx } from 'clsx';
 import * as React from 'react';
 import { useImperativeHandle, useRef } from 'react';
@@ -15,6 +20,7 @@ export interface TooltipProps
     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>();