From 23624679fe088f226d1d790154f4bae15e0937b5 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Fri, 28 Jan 2022 10:10:56 +0800
Subject: [PATCH] feat: add title prop for progress, close #4929

---
 .../__tests__/__snapshots__/demo.test.js.snap | 44 +++++++++----------
 .../__snapshots__/index.test.js.snap          | 26 +++++------
 components/progress/progress.tsx              | 19 ++++++--
 components/progress/props.ts                  |  1 +
 4 files changed, 51 insertions(+), 39 deletions(-)

diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.js.snap
index 8ac901cc7..7414d0493 100644
--- a/components/progress/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/progress/__tests__/__snapshots__/demo.test.js.snap
@@ -13,7 +13,7 @@ exports[`renders ./components/progress/demo/circle.vue correctly 1`] = `
       <path d="M 50,50 m 0,-47
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
-    </svg><span class="ant-progress-text">75%</span></div>
+    </svg><span class="ant-progress-text" title="75%">75%</span></div>
 </div>
 <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-exception">
   <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
@@ -59,7 +59,7 @@ exports[`renders ./components/progress/demo/circle-dynamic.vue correctly 1`] = `
         <path d="M 50,50 m 0,-47
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
-      </svg><span class="ant-progress-text">0%</span></div>
+      </svg><span class="ant-progress-text" title="0%">0%</span></div>
   </div>
   <div class="ant-btn-group"><button class="ant-btn ant-btn-icon-only" type="button"><span role="img" aria-label="minus" class="anticon anticon-minus"><svg focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></span></button><button class="ant-btn ant-btn-icon-only" type="button"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span></button></div>
 </div>
@@ -78,7 +78,7 @@ exports[`renders ./components/progress/demo/circle-mini.vue correctly 1`] = `
       <path d="M 50,50 m 0,-47
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
-    </svg><span class="ant-progress-text">30%</span></div>
+    </svg><span class="ant-progress-text" title="30%">30%</span></div>
 </div>
 <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-exception">
   <div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
@@ -124,7 +124,7 @@ exports[`renders ./components/progress/demo/dashboard.vue correctly 1`] = `
         <path d="M 50,50 m 0,47
    a 47,47 0 1 1 0,-94
    a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
-      </svg><span class="ant-progress-text">75%</span></div>
+      </svg><span class="ant-progress-text" title="75%">75%</span></div>
   </div>
 </div>
 `;
@@ -137,7 +137,7 @@ exports[`renders ./components/progress/demo/dynamic.vue correctly 1`] = `
         <div class="ant-progress-bg" style="width: 0%; height: 8px;"></div>
         <!---->
       </div>
-    </div><span class="ant-progress-text">0%</span>
+    </div><span class="ant-progress-text" title="0%">0%</span>
   </div>
   <div class="ant-btn-group"><button class="ant-btn ant-btn-icon-only" type="button"><span role="img" aria-label="minus" class="anticon anticon-minus"><svg focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></span></button><button class="ant-btn ant-btn-icon-only" type="button"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span></button></div>
 </div>
@@ -157,7 +157,7 @@ exports[`renders ./components/progress/demo/format.vue correctly 1`] = `
         <path d="M 50,50 m 0,-47
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
-      </svg><span class="ant-progress-text">75 Days</span></div>
+      </svg><span class="ant-progress-text" title="75 Days">75 Days</span></div>
   </div>
   <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-success">
     <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
@@ -171,7 +171,7 @@ exports[`renders ./components/progress/demo/format.vue correctly 1`] = `
         <path d="M 50,50 m 0,-47
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
-      </svg><span class="ant-progress-text">Done</span></div>
+      </svg><span class="ant-progress-text" title="Done">Done</span></div>
   </div>
   <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal">
     <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
@@ -198,7 +198,7 @@ exports[`renders ./components/progress/demo/gradient-line.vue correctly 1`] = `
         <div class="ant-progress-bg" style="width: 99.9%; height: 8px;"></div>
         <!---->
       </div>
-    </div><span class="ant-progress-text">99.9%</span>
+    </div><span class="ant-progress-text" title="99.9%">99.9%</span>
   </div>
   <div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-active">
     <div class="ant-progress-outer">
@@ -206,7 +206,7 @@ exports[`renders ./components/progress/demo/gradient-line.vue correctly 1`] = `
         <div class="ant-progress-bg" style="width: 99.9%; height: 8px;"></div>
         <!---->
       </div>
-    </div><span class="ant-progress-text">99.9%</span>
+    </div><span class="ant-progress-text" title="99.9%">99.9%</span>
   </div>
   <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal">
     <div class="ant-progress-inner ant-progress-circle-gradient" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
@@ -225,7 +225,7 @@ exports[`renders ./components/progress/demo/gradient-line.vue correctly 1`] = `
         <path d="M 50,50 m 0,-47
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
-      </svg><span class="ant-progress-text">90%</span></div>
+      </svg><span class="ant-progress-text" title="90%">90%</span></div>
   </div>
   <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-success">
     <div class="ant-progress-inner ant-progress-circle-gradient" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
@@ -256,7 +256,7 @@ exports[`renders ./components/progress/demo/line.vue correctly 1`] = `
       <div class="ant-progress-bg" style="width: 30%; height: 8px;"></div>
       <!---->
     </div>
-  </div><span class="ant-progress-text">30%</span>
+  </div><span class="ant-progress-text" title="30%">30%</span>
 </div>
 <div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-active">
   <div class="ant-progress-outer">
@@ -264,7 +264,7 @@ exports[`renders ./components/progress/demo/line.vue correctly 1`] = `
       <div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
       <!---->
     </div>
-  </div><span class="ant-progress-text">50%</span>
+  </div><span class="ant-progress-text" title="50%">50%</span>
 </div>
 <div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-exception">
   <div class="ant-progress-outer">
@@ -301,7 +301,7 @@ exports[`renders ./components/progress/demo/line-mini.vue correctly 1`] = `
         <div class="ant-progress-bg" style="width: 30%; height: 6px;"></div>
         <!---->
       </div>
-    </div><span class="ant-progress-text">30%</span>
+    </div><span class="ant-progress-text" title="30%">30%</span>
   </div>
   <div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-small ant-progress-status-active">
     <div class="ant-progress-outer">
@@ -309,7 +309,7 @@ exports[`renders ./components/progress/demo/line-mini.vue correctly 1`] = `
         <div class="ant-progress-bg" style="width: 50%; height: 6px;"></div>
         <!---->
       </div>
-    </div><span class="ant-progress-text">50%</span>
+    </div><span class="ant-progress-text" title="50%">50%</span>
   </div>
   <div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-small ant-progress-status-exception">
     <div class="ant-progress-outer">
@@ -338,7 +338,7 @@ exports[`renders ./components/progress/demo/linecap.vue correctly 1`] = `
         <div class="ant-progress-bg" style="width: 75%; height: 8px; border-radius: 0;"></div>
         <!---->
       </div>
-    </div><span class="ant-progress-text">75%</span>
+    </div><span class="ant-progress-text" title="75%">75%</span>
   </div>
   <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal">
     <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
@@ -352,7 +352,7 @@ exports[`renders ./components/progress/demo/linecap.vue correctly 1`] = `
         <path d="M 50,50 m 0,-47
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="square" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
-      </svg><span class="ant-progress-text">75%</span></div>
+      </svg><span class="ant-progress-text" title="75%">75%</span></div>
   </div>
   <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal">
     <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
@@ -366,7 +366,7 @@ exports[`renders ./components/progress/demo/linecap.vue correctly 1`] = `
         <path d="M 50,50 m 0,47
    a 47,47 0 1 1 0,-94
    a 47,47 0 1 1 0,94" stroke="" stroke-linecap="square" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
-      </svg><span class="ant-progress-text">75%</span></div>
+      </svg><span class="ant-progress-text" title="75%">75%</span></div>
   </div>
 </div>
 `;
@@ -380,7 +380,7 @@ exports[`renders ./components/progress/demo/segment.vue correctly 1`] = `
         <div class="ant-progress-bg" style="width: 60%; height: 8px;"></div>
         <div class="ant-progress-success-bg" style="width: 30%; height: 8px;"></div>
       </div>
-    </div><span class="ant-progress-text">60%</span>
+    </div><span class="ant-progress-text" title="60%">60%</span>
   </div>
   <!---->
   <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal">
@@ -395,7 +395,7 @@ exports[`renders ./components/progress/demo/segment.vue correctly 1`] = `
         <path d="M 50,50 m 0,-47
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="1" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
-      </svg><span class="ant-progress-text">60%</span></div>
+      </svg><span class="ant-progress-text" title="60%">60%</span></div>
   </div>
   <!---->
   <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal">
@@ -410,7 +410,7 @@ exports[`renders ./components/progress/demo/segment.vue correctly 1`] = `
         <path d="M 50,50 m 0,47
    a 47,47 0 1 1 0,-94
    a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" opacity="1" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
-      </svg><span class="ant-progress-text">60%</span></div>
+      </svg><span class="ant-progress-text" title="60%">60%</span></div>
   </div>
 </div>
 `;
@@ -420,7 +420,7 @@ exports[`renders ./components/progress/demo/steps.vue correctly 1`] = `
   <div class="ant-progress-steps-outer">
     <div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 14px; height: 8px;"></div>
     <div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 14px; height: 8px;"></div>
-    <div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div><span class="ant-progress-text">50%</span>
+    <div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div><span class="ant-progress-text" title="50%">50%</span>
   </div>
 </div>
 <br>
@@ -430,7 +430,7 @@ exports[`renders ./components/progress/demo/steps.vue correctly 1`] = `
     <div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 14px; height: 8px;"></div>
     <div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div>
     <div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div>
-    <div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div><span class="ant-progress-text">30%</span>
+    <div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div><span class="ant-progress-text" title="30%">30%</span>
   </div>
 </div>
 <br>
diff --git a/components/progress/__tests__/__snapshots__/index.test.js.snap b/components/progress/__tests__/__snapshots__/index.test.js.snap
index 5aeac6b59..0f52246db 100644
--- a/components/progress/__tests__/__snapshots__/index.test.js.snap
+++ b/components/progress/__tests__/__snapshots__/index.test.js.snap
@@ -13,7 +13,7 @@ exports[`Progress render dashboard 295 gapDegree 1`] = `
       <path d="M 50,50 m 0,47
    a 47,47 0 1 1 0,-94
    a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -147.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
-    </svg><span class="ant-progress-text">0%</span></div>
+    </svg><span class="ant-progress-text" title="0%">0%</span></div>
 </div>
 `;
 
@@ -30,7 +30,7 @@ exports[`Progress render dashboard 296 gapDegree 1`] = `
       <path d="M 50,50 m 0,47
    a 47,47 0 1 1 0,-94
    a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -148px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
-    </svg><span class="ant-progress-text">0%</span></div>
+    </svg><span class="ant-progress-text" title="0%">0%</span></div>
 </div>
 `;
 
@@ -47,7 +47,7 @@ exports[`Progress render dashboard zero gapDegree 1`] = `
       <path d="M 50,50 m 0,47
    a 47,47 0 1 1 0,-94
    a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
-    </svg><span class="ant-progress-text">0%</span></div>
+    </svg><span class="ant-progress-text" title="0%">0%</span></div>
 </div>
 `;
 
@@ -58,7 +58,7 @@ exports[`Progress render format 1`] = `
       <div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
       <div class="ant-progress-success-bg" style="width: 10%; height: 8px;"></div>
     </div>
-  </div><span class="ant-progress-text">50 10</span>
+  </div><span class="ant-progress-text" title="50 10">50 10</span>
 </div>
 `;
 
@@ -69,7 +69,7 @@ exports[`Progress render negative progress 1`] = `
       <div class="ant-progress-bg" style="width: 0%; height: 8px;"></div>
       <!---->
     </div>
-  </div><span class="ant-progress-text">0%</span>
+  </div><span class="ant-progress-text" title="0%">0%</span>
 </div>
 `;
 
@@ -80,7 +80,7 @@ exports[`Progress render negative successPercent 1`] = `
       <div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
       <div class="ant-progress-success-bg" style="width: 0%; height: 8px;"></div>
     </div>
-  </div><span class="ant-progress-text">50%</span>
+  </div><span class="ant-progress-text" title="50%">50%</span>
 </div>
 `;
 
@@ -91,7 +91,7 @@ exports[`Progress render normal progress 1`] = `
       <div class="ant-progress-bg" style="width: 0%; height: 8px;"></div>
       <!---->
     </div>
-  </div><span class="ant-progress-text">0%</span>
+  </div><span class="ant-progress-text" title="0%">0%</span>
 </div>
 `;
 
@@ -130,7 +130,7 @@ exports[`Progress render strokeColor 1`] = `
       <path d="M 50,50 m 0,-47
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
-    </svg><span class="ant-progress-text">50%</span></div>
+    </svg><span class="ant-progress-text" title="50%">50%</span></div>
 </div>
 `;
 
@@ -141,7 +141,7 @@ exports[`Progress render strokeColor 2`] = `
       <div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
       <!---->
     </div>
-  </div><span class="ant-progress-text">50%</span>
+  </div><span class="ant-progress-text" title="50%">50%</span>
 </div>
 `;
 
@@ -152,7 +152,7 @@ exports[`Progress render strokeColor 3`] = `
       <div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
       <!---->
     </div>
-  </div><span class="ant-progress-text">50%</span>
+  </div><span class="ant-progress-text" title="50%">50%</span>
 </div>
 `;
 
@@ -163,7 +163,7 @@ exports[`Progress render successColor progress 1`] = `
       <div class="ant-progress-bg" style="width: 60%; height: 8px;"></div>
       <div class="ant-progress-success-bg" style="width: 30%; height: 8px; background-color: rgb(255, 255, 255);"></div>
     </div>
-  </div><span class="ant-progress-text">60%</span>
+  </div><span class="ant-progress-text" title="60%">60%</span>
 </div>
 `;
 
@@ -174,7 +174,7 @@ exports[`Progress render trailColor progress 1`] = `
       <div class="ant-progress-bg" style="width: 0%; height: 8px;"></div>
       <!---->
     </div>
-  </div><span class="ant-progress-text">0%</span>
+  </div><span class="ant-progress-text" title="0%">0%</span>
 </div>
 `;
 
@@ -183,7 +183,7 @@ exports[`Progress should support steps 1`] = `
   <div class="ant-progress-steps-outer">
     <div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div>
     <div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div>
-    <div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div><span class="ant-progress-text">0%</span>
+    <div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div><span class="ant-progress-text" title="0%">0%</span>
   </div>
 </div>
 `;
diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx
index 6b4cdf303..e14215768 100644
--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@@ -63,7 +63,7 @@ export default defineComponent({
     });
 
     const renderProcessInfo = () => {
-      const { showInfo, format, type, percent } = props;
+      const { showInfo, format, type, percent, title } = props;
       const successPercent = getSuccessPercent(props);
       if (!showInfo) return null;
 
@@ -81,11 +81,18 @@ export default defineComponent({
       } else if (progressStatus.value === 'success') {
         text = isLineType ? <CheckCircleFilled /> : <CheckOutlined />;
       }
-      return <span class={`${prefixCls.value}-text`}>{text}</span>;
+      return (
+        <span
+          class={`${prefixCls.value}-text`}
+          title={title === undefined && typeof text === 'string' ? text : undefined}
+        >
+          {text}
+        </span>
+      );
     };
 
     return () => {
-      const { type, steps, strokeColor } = props;
+      const { type, steps, strokeColor, title } = props;
       const progressInfo = renderProcessInfo();
 
       let progress: VueNode;
@@ -118,7 +125,11 @@ export default defineComponent({
         [`${prefixCls.value}-status-${progressStatus.value}`]: true,
       };
 
-      return <div class={classNames}>{progress}</div>;
+      return (
+        <div class={classNames} title={title}>
+          {progress}
+        </div>
+      );
     };
   },
 });
diff --git a/components/progress/props.ts b/components/progress/props.ts
index 371ea5079..27a4b096c 100644
--- a/components/progress/props.ts
+++ b/components/progress/props.ts
@@ -42,6 +42,7 @@ export const progressProps = () => ({
   steps: PropTypes.number,
   /** @deprecated Use `success` instead */
   successPercent: PropTypes.number,
+  title: String,
 });
 
 export type ProgressProps = Partial<ExtractPropTypes<ReturnType<typeof progressProps>>>;