Feat : tooltip cho phần biểu đồ

src/_components/boxChart/BoxDoughnutBarChart.js

@@ -43,14 +43,26 @@ export default function BoxDoughnutBarChart({
         <div className='doughnut-chart-content flex-1'>
           <RDoughnutChart data={dataDoughnut} />
         </div>
-        <div className='origin-vertical justify-content-center align-item-center flex-1'>
-          <p style={{color: PRIMARY_COLOR, fontSize: '2.2rem', fontWeight: 800}}>{current}</p>
-          <p style={{color: '#01AEF0', fontSize: '2.2rem', fontWeight: 800}}>
+        <div className='origin-vertical justify-content-center align-item-center flex-1' style={{cursor:'pointer'}}>
+            <div className="tooltip">
+              <p 
+                style={{color: PRIMARY_COLOR, fontSize: '2.2rem', fontWeight: 800}}
+                >
+                {current}
+                <span className="tooltiptext" style={{color: PRIMARY_COLOR}}>Số lượng đã tham gia: {current}</span>
+              </p>
+              </div>
+            <div className="tooltip"> 
+              <p 
+                style={{color: '#01AEF0', fontSize: '2.2rem', fontWeight: 800}}
+                >
                 {target > 0 ? target : '...'}
+                <span className="tooltiptext" style={{color: '#01AEF0'}}>Tổng số: {target > 0 ? target : '...'}</span>
               </p>
             </div>
         </div>
       </div>
+    </div>
   )
   
   const renderBarSection = () => (

src/_components/boxChart/BoxDoughnutChar.js

@@ -10,8 +10,24 @@ export default function BoxDoughnutChart({data = [], title, propsContainer}) {
   const renderStats = () => {
     return (
       <>
-        <p style={{color: PRIMARY_COLOR, fontSize: '2.2rem', fontWeight: 800}}>{current}</p>
-        <p style={{color: '#01AEF0', fontSize: '2.2rem', fontWeight: 800}}>{target > 0 ? target : '...'}</p>
+        <div style={{cursor:'pointer',display: 'flex', flexDirection: 'column', alignItems:'center'}}>
+            <div className="tooltip">
+              <p 
+                style={{color: PRIMARY_COLOR, fontSize: '2.2rem', fontWeight: 800}}
+                >
+                {current}
+                <span className="tooltiptext" style={{color: PRIMARY_COLOR}}>Số lượng đã tham gia: {current}</span>
+              </p>
+            </div>
+            <div className="tooltip"> 
+              <p 
+                style={{color: '#01AEF0', fontSize: '2.2rem', fontWeight: 800}}
+                >
+                {target > 0 ? target : '...'}
+                <span className="tooltiptext" style={{color: '#01AEF0'}}>Tổng số: {target > 0 ? target : '...'}</span>
+              </p>
+            </div>
+        </div>
       </>
     )
   }

src/_components/boxChart/boxChart.scss

@@ -12,7 +12,7 @@
   }
 
   @media (max-width: 1599px) {
-    max-width: 220px;
+    max-width: 260px;
   }
 
   .box-chart-title {
@@ -65,7 +65,35 @@
     width: 300px;
 
     @media (max-width: 1750px) {
-      max-width: 220px;
+      max-width: 240px;
     }
   }
 }
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+
+  .tooltiptext {
+    visibility: hidden;
+    width: max-content;
+    background-color: #fff;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+    transition: opacity 0.3s;
+    font-size: 1.4rem;
+  }
+
+  &:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+  }
+}