feat: Optimize the display of toolTips

src/components/Charts/MiniProgress/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Tooltip } from 'antd';
-import { formatMessage } from 'umi/locale';
 
 import styles from './index.less';
 
@@ -10,28 +9,27 @@ const MiniProgress = ({
   color = 'rgb(19, 194, 194)',
   strokeWidth,
   percent,
-}) => (
+}) => {
-  <div className={styles.miniProgress}>
+  return (
-    <Tooltip
+    <div className={styles.miniProgress}>
-      title={`${targetLabel ||
+      <Tooltip title={targetLabel}>
-        formatMessage({ id: 'component.miniProgress.tooltipDefault' }).concat(': ')} ${target}%`}
+        <div className={styles.target} style={{ left: target ? `${target}%` : null }}>
-    >
+          <span style={{ backgroundColor: color || null }} />
-      <div className={styles.target} style={{ left: target ? `${target}%` : null }}>
+          <span style={{ backgroundColor: color || null }} />
-        <span style={{ backgroundColor: color || null }} />
+        </div>
-        <span style={{ backgroundColor: color || null }} />
+      </Tooltip>
+      <div className={styles.progressWrap}>
+        <div
+          className={styles.progress}
+          style={{
+            backgroundColor: color || null,
+            width: percent ? `${percent}%` : null,
+            height: strokeWidth || null,
+          }}
+        />
       </div>
-    </Tooltip>
-    <div className={styles.progressWrap}>
-      <div
-        className={styles.progress}
-        style={{
-          backgroundColor: color || null,
-          width: percent ? `${percent}%` : null,
-          height: strokeWidth || null,
-        }}
-      />
     </div>
-  </div>
+  );
-);
+};
 
 export default MiniProgress;

src/components/Charts/MiniProgress/index.less

@@ -19,6 +19,8 @@
     position: absolute;
     top: 0;
     bottom: 0;
+    z-index: 9;
+    width: 20px;
     span {
       position: absolute;
       top: 0;

src/pages/Dashboard/IntroduceRow.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { Row, Col, Icon, Tooltip } from 'antd';
-import { FormattedMessage } from 'umi/locale';
+import { FormattedMessage, formatMessage } from 'umi/locale';
 import styles from './Analysis.less';
 import { ChartCard, MiniArea, MiniBar, MiniProgress, Field } from '@/components/Charts';
 import Trend from '@/components/Trend';
@@ -135,7 +135,15 @@ const IntroduceRow = memo(({ loading, visitData }) => (
         }
         contentHeight={46}
       >
-        <MiniProgress percent={78} strokeWidth={8} target={80} color="#13C2C2" />
+        <MiniProgress
+          percent={78}
+          strokeWidth={8}
+          target={80}
+          targetLabel={`${formatMessage({ id: 'component.miniProgress.tooltipDefault' }).concat(
+            ': '
+          )}80%`}
+          color="#13C2C2"
+        />
       </ChartCard>
     </Col>
   </Row>