From e3ae5d25fb39b657fc68b46d8544186085bca40c Mon Sep 17 00:00:00 2001
From: diego-morales-flores-1996 <diego@vizonomy.com>
Date: Fri, 8 Nov 2024 09:45:22 -0400
Subject: [PATCH] [TM-1410] TM-1410 update tooltips

---
 src/pages/dashboard/constants/tooltips.ts     |  4 ++--
 src/pages/dashboard/hooks/useDashboardData.ts | 10 +++++++---
 src/pages/dashboard/index.page.tsx            | 10 ++++++++++
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/pages/dashboard/constants/tooltips.ts b/src/pages/dashboard/constants/tooltips.ts
index 8feb4391f..3c75ffec4 100644
--- a/src/pages/dashboard/constants/tooltips.ts
+++ b/src/pages/dashboard/constants/tooltips.ts
@@ -1,5 +1,5 @@
 export const TREES_PLANTED_TOOLTIP =
-  "Total number of trees planted by funded projects to date, as reported through six-month progress reports. This also includes trees planted by projects as part of their assisted natural regeneration activities.";
+  "Total number of trees planted by funded projects to date, as reported through six-month progress reports.";
 
 export const HECTARES_UNDER_RESTORATION_TOOLTIP =
   "Total land area measured in hectares with active restoration interventions, tallied by the total area of polygons submitted by projects and approved by data quality analysts.";
@@ -8,7 +8,7 @@ export const JOBS_CREATED_TOOLTIP =
   "Number of people newly employed directly by the project. Terrafund defines a job as any individual or person, aged 18 years or older, that is directly compensated by a project at any time to support their restoration activities.";
 
 export const NUMBER_OF_TREES_PLANTED_TOOLTIP =
-  "Total number of trees that funded projects have planted to date, as reported through 6-month progress reports and displayed as progress towards goal. It also includes trees planted as part of assisted natural regeneration activities.";
+  "Total number of trees that funded projects have planted to date, as reported through 6-month progress reports and displayed as progress towards goal.";
 
 export const NUMBER_OF_TREES_PLANTED_BY_YEAR_TOOLTIP = "Number of trees planted in each year.";
 
diff --git a/src/pages/dashboard/hooks/useDashboardData.ts b/src/pages/dashboard/hooks/useDashboardData.ts
index 3998b2221..aa0724338 100644
--- a/src/pages/dashboard/hooks/useDashboardData.ts
+++ b/src/pages/dashboard/hooks/useDashboardData.ts
@@ -21,6 +21,7 @@ import {
 import { DashboardTreeRestorationGoalResponse } from "@/generated/apiSchemas";
 import { createQueryParams } from "@/utils/dashboardUtils";
 
+import { HECTARES_UNDER_RESTORATION_TOOLTIP, JOBS_CREATED_TOOLTIP, TREES_PLANTED_TOOLTIP } from "../constants/tooltips";
 import { BBox } from "./../../../components/elements/Map-mapbox/GeoJSON";
 
 export const useDashboardData = (filters: any) => {
@@ -30,15 +31,18 @@ export const useDashboardData = (filters: any) => {
   const [dashboardHeader, setDashboardHeader] = useState([
     {
       label: "Trees Planted",
-      value: "0"
+      value: "0",
+      tooltip: TREES_PLANTED_TOOLTIP
     },
     {
       label: "Hectares Under Restoration",
-      value: "0 ha"
+      value: "0 ha",
+      tooltip: HECTARES_UNDER_RESTORATION_TOOLTIP
     },
     {
       label: "Jobs Created",
-      value: "0"
+      value: "0",
+      tooltip: JOBS_CREATED_TOOLTIP
     }
   ]);
   const [numberTreesPlanted, setNumberTreesPlanted] = useState({
diff --git a/src/pages/dashboard/index.page.tsx b/src/pages/dashboard/index.page.tsx
index 76b6f9d94..508fd02f1 100644
--- a/src/pages/dashboard/index.page.tsx
+++ b/src/pages/dashboard/index.page.tsx
@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import { When } from "react-if";
 
 import Text from "@/components/elements/Text/Text";
+import ToolTip from "@/components/elements/Tooltip/Tooltip";
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import PageCard from "@/components/extensive/PageElements/Card/PageCard";
 import PageRow from "@/components/extensive/PageElements/Row/PageRow";
@@ -284,6 +285,15 @@ const Dashboard = () => {
                   <Text variant="text-20" className="text-darkCustom" as="span">
                     {t(item.value)}
                   </Text>
+                  <ToolTip
+                    title={t(item.label)}
+                    content={t(item.tooltip)}
+                    placement="top"
+                    width="w-56 lg:w-64"
+                    trigger="click"
+                  >
+                    <Icon name={IconNames.IC_INFO} className="h-3.5 w-3.5 text-darkCustom lg:h-5 lg:w-5" />
+                  </ToolTip>
                 </div>
               </div>
             ))}