Added tooltip to stats screen

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">

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',
 							},
 						]}
 					/>