From 6f1181887664cb1884c655e8d3d328ebc6618d7c Mon Sep 17 00:00:00 2001
From: Joao Ramos <joaomframos.1@gmail.com>
Date: Sat, 3 Feb 2024 15:11:19 +0000
Subject: [PATCH] Added tooltip to stats screen

---
 src/components/ProfileSummary.tsx | 6 +++++-
 src/pages/stats.tsx               | 3 +++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/ProfileSummary.tsx b/src/components/ProfileSummary.tsx
index 095b6202..40627645 100644
--- a/src/components/ProfileSummary.tsx
+++ b/src/components/ProfileSummary.tsx
@@ -12,6 +12,7 @@ interface Props {
 		icon: ReactElement;
 		value: string | number;
 		label: string;
+		tooltip?: string;
 	}[];
 	children?: ReactElement;
 }
@@ -48,7 +49,10 @@ export default function ProfileSummary({user, items}: Props) {
 				<div className="flex justify-between w-full mt-8 -md:hidden">
 					{items.map((item) => (
 						<div className="flex gap-4 items-center" key={item.label}>
-							<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
+							<div
+								className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl relative group tooltip tooltip-bottom"
+								data-tip={item.tooltip}
+							>
 								{item.icon}
 							</div>
 							<div className="flex flex-col">
diff --git a/src/pages/stats.tsx b/src/pages/stats.tsx
index 36206207..ea8f9886 100644
--- a/src/pages/stats.tsx
+++ b/src/pages/stats.tsx
@@ -170,16 +170,19 @@ export default function Stats() {
 								icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
 								value: Object.keys(groupBySession(userStats)).length,
 								label: "Exams",
+								tooltip: 'Number of all conducted completed exams',
 							},
 							{
 								icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
 								value: userStats.length,
 								label: "Exercises",
+								tooltip: 'Number of all conducted exercises including Level Test',
 							},
 							{
 								icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
 								value: `${userStats.length > 0 ? averageScore(userStats) : 0}%`,
 								label: "Average Score",
+								tooltip: 'Average success rate for questions responded',
 							},
 						]}
 					/>