diff --git a/src/_components/boxChart/BoxDoughnutBarChart.js b/src/_components/boxChart/BoxDoughnutBarChart.js index 9a18dca..3a0f49b 100644 --- a/src/_components/boxChart/BoxDoughnutBarChart.js +++ b/src/_components/boxChart/BoxDoughnutBarChart.js @@ -43,11 +43,23 @@ export default function BoxDoughnutBarChart({
-
-

{current}

-

- {target > 0 ? target : '...'} -

+
+
+

+ {current} + Số lượng đã tham gia: {current} +

+
+
+

+ {target > 0 ? target : '...'} + Tổng số: {target > 0 ? target : '...'} +

+
diff --git a/src/_components/boxChart/BoxDoughnutChar.js b/src/_components/boxChart/BoxDoughnutChar.js index a20cc9d..c0ffd87 100644 --- a/src/_components/boxChart/BoxDoughnutChar.js +++ b/src/_components/boxChart/BoxDoughnutChar.js @@ -10,8 +10,24 @@ export default function BoxDoughnutChart({data = [], title, propsContainer}) { const renderStats = () => { return ( <> -

{current}

-

{target > 0 ? target : '...'}

+
+
+

+ {current} + Số lượng đã tham gia: {current} +

+
+
+

+ {target > 0 ? target : '...'} + Tổng số: {target > 0 ? target : '...'} +

+
+
) } diff --git a/src/_components/boxChart/boxChart.scss b/src/_components/boxChart/boxChart.scss index e22ff06..4c65b41 100644 --- a/src/_components/boxChart/boxChart.scss +++ b/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; + } } \ No newline at end of file