Repository: ant-design/ant-design
Pull request #53066: demo: improve disabled demo for tooltip
Author: login: thinkasany
Created: 2025-03-05T13:22:47Z | Merged: 2025-03-05T13:41:36Z

<!--
First of all, thank you for your contribution! 😄
For requesting to pull a new feature or bugfix, please send it from a feature/bugfix branch based on the `master` branch.
Before submitting your pull request, please make sure the checklist below is confirmed.
Your pull requests will be merged after one of the collaborators approve.
Thank you!
-->

[中文版模板 / Chinese template](https://github.com/ant-design/ant-design/blob/master/.github/PULL_REQUEST_TEMPLATE_CN.md?plain=1)

### 🤔 This is a ...

- [ ] 🆕 New feature
- [ ] 🐞 Bug fix
- [ ] 📝 Site / documentation improvement
- [x] 📽️ Demo improvement
- [ ] 💄 Component style improvement
- [ ] 🤖 TypeScript definition improvement
- [ ] 📦 Bundle size optimization
- [ ] ⚡️ Performance optimization
- [ ] ⭐️ Feature enhancement
- [ ] 🌐 Internationalization
- [ ] 🛠 Refactoring
- [ ] 🎨 Code style optimization
- [ ] ✅ Test Case
- [ ] 🔀 Branch merge
- [ ] ⏩ Workflow
- [ ] ⌨️ Accessibility improvement
- [ ] ❓ Other (about what?)


### 💡 Background and Solution
禁用的时候 Tooltip will show on mouse enter.  这个文案就不是很合适了
> - The specific problem to be addressed.
> - List the final API implementation and usage if needed.
> - If there are UI/interaction changes, consider providing screenshots or GIFs.

### 📝 Change Log

> - Read [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) like a cat tracks a laser pointer.
> - Describe the impact of the changes on developers, not the solution approach.
> - Reference: https://ant.design/changelog

| Language   | Changelog |
| ---------- | --------- |
| 🇺🇸 English |    -       |
| 🇨🇳 Chinese |        -   |



Diff:
diff --git a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
index 874e9dd94d22..2d3734f38003 100644
--- a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1372,49 +1372,35 @@ Array [
 exports[`renders components/tooltip/demo/destroy-tooltip-on-hide.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/tooltip/demo/disabled.tsx extend context correctly 1`] = `
-<div
-  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
->
-  <div
-    class="ant-space-item"
+Array [
+  <button
+    aria-describedby="test-id"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+    type="button"
   >
-    <button
-      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
-      type="button"
-    >
-      <span>
-        Enable
-      </span>
-    </button>
-  </div>
+    <span>
+      Enable
+    </span>
+  </button>,
   <div
-    class="ant-space-item"
+    class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
   >
-    <span
-      aria-describedby="test-id"
-    >
-      Tooltip will show on mouse enter.
-    </span>
     <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      class="ant-tooltip-arrow"
+      style="position: absolute; bottom: 0px; left: 0px;"
+    />
+    <div
+      class="ant-tooltip-content"
     >
       <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; bottom: 0px; left: 0px;"
+        class="ant-tooltip-inner"
+        id="test-id"
+        role="tooltip"
       />
-      <div
-        class="ant-tooltip-content"
-      >
-        <div
-          class="ant-tooltip-inner"
-          id="test-id"
-          role="tooltip"
-        />
-      </div>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders components/tooltip/demo/disabled.tsx extend context correctly 2`] = `[]`;
diff --git a/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap b/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap
index 432e76aacfcd..10668b5167a9 100644
--- a/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap
@@ -588,31 +588,15 @@ exports[`renders components/tooltip/demo/destroy-tooltip-on-hide.tsx correctly 1
 `;
 
 exports[`renders components/tooltip/demo/disabled.tsx correctly 1`] = `
-<div
-  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+<button
+  aria-describedby="test-id"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+  type="button"
 >
-  <div
-    class="ant-space-item"
-  >
-    <button
-      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
-      type="button"
-    >
-      <span>
-        Enable
-      </span>
-    </button>
-  </div>
-  <div
-    class="ant-space-item"
-  >
-    <span
-      aria-describedby="test-id"
-    >
-      Tooltip will show on mouse enter.
-    </span>
-  </div>
-</div>
+  <span>
+    Enable
+  </span>
+</button>
 `;
 
 exports[`renders components/tooltip/demo/disabled-children.tsx correctly 1`] = `
diff --git a/components/tooltip/demo/disabled.tsx b/components/tooltip/demo/disabled.tsx
index 5677005fa845..c980aa5b0225 100644
--- a/components/tooltip/demo/disabled.tsx
+++ b/components/tooltip/demo/disabled.tsx
@@ -1,16 +1,13 @@
 import React, { useState } from 'react';
-import { Button, Space, Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
 
 const App: React.FC = () => {
   const [disabled, setDisabled] = useState(true);
 
   return (
-    <Space>
+    <Tooltip title={disabled ? '' : 'prompt text'}>
       <Button onClick={() => setDisabled(!disabled)}>{disabled ? 'Enable' : 'Disable'}</Button>
-      <Tooltip title={disabled ? '' : 'prompt text'}>
-        <span>Tooltip will show on mouse enter.</span>
-      </Tooltip>
-    </Space>
+    </Tooltip>
   );
 };
 


Reviews:
user: login: petercat-assistant[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-05T13:23:09Z
user: login: afc163
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-05T13:24:32Z
user: login: li-jia-nan
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-05T14:19:01Z
user: login: li-jia-nan
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-05T14:19:22Z

Review comments:
diff_hunk: @@ -1,16 +1,13 @@
 import React, { useState } from 'react';
-import { Button, Space, Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
 
 const App: React.FC = () => {
   const [disabled, setDisabled] = useState(true);
 
   return (
-    <Space>
+    <Tooltip title={disabled ? '' : 'prompt text'}>
path: components/tooltip/demo/disabled.tsx
user: login: petercat-assistant[bot]
body: The removal of the `Space` component and adjustment of the tooltip logic in the demo improves clarity and functionality. Ensure that the tooltip behavior aligns with the intended user experience when the button is disabled.
created_at: 2025-03-05T13:23:08Z
author_association: NONE
diff_hunk: @@ -1,16 +1,13 @@
 import React, { useState } from 'react';
-import { Button, Space, Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
 
 const App: React.FC = () => {
   const [disabled, setDisabled] = useState(true);
 
   return (
-    <Space>
+    <Tooltip title={disabled ? '' : 'prompt text'}>
path: components/tooltip/demo/disabled.tsx
user: login: li-jia-nan
body: 这里其实用 null 更严谨一些，在 React17 中，会把空元素也作为 Fiber 节点，而 React 18 则会忽略空字符，如果用 null 的话，17 和 18 的行为是一致的
created_at: 2025-03-05T14:19:00Z
author_association: MEMBER
diff_hunk: @@ -1,16 +1,13 @@
 import React, { useState } from 'react';
-import { Button, Space, Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
 
 const App: React.FC = () => {
   const [disabled, setDisabled] = useState(true);
 
   return (
-    <Space>
+    <Tooltip title={disabled ? '' : 'prompt text'}>
path: components/tooltip/demo/disabled.tsx
user: login: li-jia-nan
body: 不过 Tooltip 内部处理了这个情况，只是顺带提一嘴
created_at: 2025-03-05T14:19:22Z
author_association: MEMBER

PR comments:
user: login: bolt-new-by-stackblitz[bot]
created_at: 2025-03-05T13:22:50Z
body: <a href="https://stackblitz.com/~/github.com/ant-design/ant-design/pull/53066"><img src="https://developer.stackblitz.com/img/review_pr_small.svg" alt="Review PR in StackBlitz Codeflow" align="left" width="103" height="20"></a> _Run & review this pull request in [StackBlitz Codeflow](https://stackblitz.com/~/github.com/ant-design/ant-design/pull/53066)._

author_association: NONE
user: login: github-actions[bot]
created_at: 2025-03-05T13:22:58Z
body: [<img width="300" alt="Preview is ready" src="https://user-images.githubusercontent.com/5378891/72400743-23dbb200-3785-11ea-9d13-1a2d92743846.png">](https://preview-53066-ant-design.surge.sh)
<!-- AUTO_PREVIEW_HOOK -->
<!-- AUTO_PREVIEW_HOOK -->
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-03-05T13:22:58Z
body: <!-- VISUAL_DIFF_FAILED -->

## 👁 Visual Regression Report for PR #53066 Failed ❌
> **🎯 Target branch:** master (1c0a184357d869fc52028d363c6bd31ad8635886)
> 📖 <a href="https://antd-visual-diff.oss-accelerate.aliyuncs.com/pr-53066/visualRegressionReport/report.html" target="_blank">View Full Report ↗︎</a>
> 📖 <a href="https://antd-visual-diff.oss-accelerate.aliyuncs.com/pr-53066/visualRegressionReport/index.html" target="_blank">Alternative Report ↗︎</a>
> **📊 Summary:** 🔄 `4` changed


| Expected (Branch master) | Actual (Current PR) | Diff |
| --- | --- | --- |
| ![tooltip-disabled.compact.png](https://antd-visual-diff.oss-accelerate.aliyuncs.com/pr-53066/visualRegressionReport/images/base/tooltip-disabled.compact.png?ref=0dba795c) tooltip-disabled.compact.png | ![tooltip-disabled.compact.png](https://antd-visual-diff.oss-accelerate.aliyuncs.com/pr-53066/visualRegressionReport/images/current/tooltip-disabled.compact.png?ref=0dba795c) tooltip-disabled.compact.png | ![](https://antd-visual-diff.oss-accelerate.aliyuncs.com/pr-53066/visualRegressionReport/images/diff/tooltip-disabled.compact.png?ref=0dba795c) |
| ![tooltip-disabled.compact.png](https://antd-visual-diff.oss-accelerate.aliyuncs.com/pr-53066/visualRegressionReport/images/base/tooltip-disabled.compact.css-var.png?ref=0dba795c) tooltip-disabled.compact.png | ![tooltip-disabled.compact.css-var.png](https://antd-visual-diff.oss-accelerate.aliyuncs.com/pr-53066/visualRegressionReport/images/current/tooltip-disabled.compact.css-var.png?ref=0dba795c) tooltip-disabled.compact.css-var.png | ![](https://antd-visual-diff.oss-accelerate.aliyuncs.com/pr-53066/visualRegressionReport/images/diff/tooltip-disabled.compact.css-var.png?ref=0dba795c) |
| ![tooltip-disabled.default.png](https://antd-visual-diff.oss-accelerate.aliyuncs.com/pr-53066/visualRegressionReport/images/base/tooltip-disabled.default.png?ref=0dba795c) tooltip-disabled.default.png | ![tooltip-disabled.default.png](https://antd-visual-diff.oss-accelerate.aliyuncs.com/pr-53066/visualRegressionReport/images/current/tooltip-disabled.default.png?ref=0dba795c) tooltip-disabled.default.png | ![](https://antd-visual-diff.oss-accelerate.aliyuncs.com/pr-53066/visualRegressionReport/images/diff/tooltip-disabled.default.png?ref=0dba795c) |
| ![tooltip-disabled.default.png](https://antd-visual-diff.oss-accelerate.aliyuncs.com/pr-53066/visualRegressionReport/images/base/tooltip-disabled.default.css-var.png?ref=0dba795c) tooltip-disabled.default.png | ![tooltip-disabled.default.css-var.png](https://antd-visual-diff.oss-accelerate.aliyuncs.com/pr-53066/visualRegressionReport/images/current/tooltip-disabled.default.css-var.png?ref=0dba795c) tooltip-disabled.default.css-var.png | ![](https://antd-visual-diff.oss-accelerate.aliyuncs.com/pr-53066/visualRegressionReport/images/diff/tooltip-disabled.default.css-var.png?ref=0dba795c) |

---

> [!IMPORTANT]
> There are **4** diffs found in this PR: 🔄 `4` changed.
> **Please check all items:**
> - [x] Visual diff is acceptable
<!-- VISUAL_DIFF_REGRESSION_HOOK -->
<!-- VISUAL_DIFF_REGRESSION_HOOK -->
author_association: CONTRIBUTOR
user: login: petercat-assistant[bot]
created_at: 2025-03-05T13:23:06Z
body: ### Walkthrough
This pull request improves the demo for the Tooltip component by modifying how the tooltip is displayed when the component is disabled. The changes aim to make the demo more intuitive by adjusting the tooltip's behavior and presentation.

### Changes
| Files | Summary |
|-------|---------|
| components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap, components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap | Updated snapshot tests to reflect changes in the tooltip demo behavior. |
| components/tooltip/demo/disabled.tsx | Modified the Tooltip demo to remove unnecessary `Space` component and adjusted the tooltip display logic when disabled. |
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-03-05T13:25:22Z
body: ## size-limit report 📦 
| Path                            | Size      |
| ------------------------------- | --------- |
| `dist/antd.min.js`              | 448.42 KB |
| `dist/antd-with-locales.min.js` | 534.5 KB  |
author_association: CONTRIBUTOR
user: login: pkg-pr-new[bot]
created_at: 2025-03-05T13:26:18Z
body: 

<details><summary><b>More templates</b></summary><p>

- [farm-normal](https://pkg.pr.new/template/388582d5-1cad-4afa-8ce2-144a824247a6)
- [rsbuild-normal](https://pkg.pr.new/template/520d2d61-6984-420a-894f-19b74ba00a00)
- [umi-normal](https://pkg.pr.new/template/3232b12f-c535-4b16-a1f1-d5004c832ec5)
- [vite-normal](https://pkg.pr.new/template/76f101cc-9cf9-479d-bcaf-d223204999d3)
- [vite-practice](https://pkg.pr.new/template/ed5520a9-f04a-44f8-bef4-275ff5ef6890)
- [with-nextjs-app-router-inline-style](https://pkg.pr.new/template/fb457977-e748-482f-9d3d-0a25285d3fb0)
- [with-nextjs-extract-style](https://pkg.pr.new/template/4abfdefa-f57f-4d3b-9674-a92cb0357e42)
- [with-nextjs-generate-css-on-demand](https://pkg.pr.new/template/bd6417b2-4e3c-4ba7-9db6-ea2c01e1b86f)
- [with-nextjs-inline-style](https://pkg.pr.new/template/609f70ad-9d7b-4c89-a3b4-480e51681b0b)

</p></details>
      
    


```
npm i https://pkg.pr.new/ant-design/ant-design/antd@53066
```


_commit: <a href="https://github.com/ant-design/ant-design/runs/46961240771"><code>3616025</code></a>_

author_association: NONE
user: login: codecov[bot]
created_at: 2025-03-05T13:27:20Z
body: ## [Bundle](https://app.codecov.io/gh/ant-design/ant-design/pull/53066?dropdown=bundle) Report

Changes will increase total bundle size by 6.26MB (185.03%) :arrow_up::warning:, exceeding the [configured](https://docs.codecov.com/docs/javascript-bundle-analysis#main-features) threshold of 5%.

| Bundle name | Size | Change |
| ----------- | ---- | ------ |
| antd.min-array-push | 9.64MB | 6.26MB (185.03%) :arrow_up::warning: |

### Affected Assets, Files, and Routes:

<details>
<summary>view changes for bundle: antd.min-array-push</summary>

#### **Assets Changed:**
| Asset Name | Size Change | Total Size | Change (%) |
| ---------- | ----------- | ---------- | ---------- |
| **```antd-with-locales.js```** _(New)_ | 5.07MB | 5.07MB | 100.0% :rocket: |
| **```antd.js```** _(New)_ | 4.57MB | 4.57MB | 100.0% :rocket: |
| ~~**```antd-with-locales.min.js```**~~ _(Deleted)_ | -1.84MB | 0 bytes | -100.0% :wastebasket: |
| ~~**```antd.min.js```**~~ _(Deleted)_ | -1.54MB | 0 bytes | -100.0% :wastebasket: |












</details>

author_association: NONE
user: login: cloudflare-workers-and-pages[bot]
created_at: 2025-03-05T13:31:45Z
body: ## Deploying ant-design with &nbsp;<a href="https://pages.dev"><img alt="Cloudflare Pages" src="https://user-images.githubusercontent.com/23264/106598434-9e719e00-654f-11eb-9e59-6167043cfa01.png" width="16"></a> &nbsp;Cloudflare Pages

<table><tr><td><strong>Latest commit:</strong> </td><td>
<code>97ab8cf</code>
</td></tr>
<tr><td><strong>Status:</strong></td><td>&nbsp;✅&nbsp; Deploy successful!</td></tr>
<tr><td><strong>Preview URL:</strong></td><td>
<a href='https://99baafcd.ant-design.pages.dev'>https://99baafcd.ant-design.pages.dev</a>
</td></tr>
<tr><td><strong>Branch Preview URL:</strong></td><td>
<a href='https://demo-improve.ant-design.pages.dev'>https://demo-improve.ant-design.pages.dev</a>
</td></tr>
</table>

[View logs](https://dash.cloudflare.com/e6395b6beb3487d0b05d2b606540a2d0/pages/view/ant-design/99baafcd-154f-47fa-a593-7b821454758a)

author_association: NONE
user: login: codecov[bot]
created_at: 2025-03-05T13:40:20Z
body: ## [Codecov](https://app.codecov.io/gh/ant-design/ant-design/pull/53066?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) Report
All modified and coverable lines are covered by tests :white_check_mark:
> Project coverage is 100.00%. Comparing base [(`1c0a184`)](https://app.codecov.io/gh/ant-design/ant-design/commit/1c0a184357d869fc52028d363c6bd31ad8635886?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) to head [(`97ab8cf`)](https://app.codecov.io/gh/ant-design/ant-design/commit/97ab8cfbc5f0a212cfcc32509252cd8d2a1e4249?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).
> Report is 2 commits behind head on master.

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff            @@
##            master    #53066   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          769       769           
  Lines        13924     13865   -59     
  Branches      3644      3633   -11     
=========================================
- Hits         13924     13865   -59     
```

</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/ant-design/ant-design/pull/53066?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).

author_association: NONE
user: login: thinkasany
created_at: 2025-03-05T13:43:15Z
body: @yellowryan 感谢反馈，已调整交互，并加上了协作者～ 
<img width="745" alt="image" src="https://github.com/user-attachments/assets/3fde0097-11e3-4de3-81e0-191df30d8053" />

author_association: MEMBER