add tooltips

src/pages/Admin/Charity/Dashboard/Dashboard.tsx

@@ -47,11 +47,13 @@ function Loaded({
       <div className="grid gap-4 @lg:grid-cols-2">
         <Figure
           title="Savings"
+          tooltip="Funds held in Fidelity Government Money Market (SPAXX)"
           icon={<LiaPiggyBankSolid size={24} />}
           amount={`$ ${humanize(props.donationsBal - props.payoutsMade, 2)}`}
         />
         <Figure
           title="Investments"
+          tooltip="Funds invested in a diversified portfolio comprising (50%) domestic and international equities, (30%) fixed income, (15%) crypto and (10%) cash."
           icon={<BsGraphUpArrow size={16} />}
           amount={`$ ${humanize(props.sustainabilityFundBal, 2)}`}
         />

src/pages/Admin/Charity/Dashboard/Figure.tsx

@@ -1,18 +1,30 @@
-import type { ReactNode } from "react";
+import Icon from "components/Icon";
+import Tooltip from "components/Tooltip";
+import { type ReactNode, useRef } from "react";
 
 type Props = {
   title: string;
   icon: ReactNode;
   /** e.g. $100,000 */
   amount: string;
+  tooltip?: string;
 };
 
 export default function Figure(props: Props) {
+  const ref = useRef<HTMLDivElement | null>(null);
   return (
     <div className="@container rounded border border-gray-l4 p-4">
-      <div className="flex items-center justify-between mb-4">
+      <div className="flex items-center mb-4">
         <h4 className="text-sm">{props.title}</h4>
-        {props.icon}
+        {props.tooltip && (
+          <>
+            <Tooltip anchorRef={ref} content={props.tooltip} />
+            <div ref={ref}>
+              <Icon type="Question" size={14} className="text-gray ml-1" />
+            </div>
+          </>
+        )}
+        <span className="ml-auto">{props.icon}</span>
       </div>
       <p className="text-2xl font-medium">{props.amount}</p>
     </div>

src/pages/Admin/Charity/Dashboard/Schedule/Schedule.tsx

@@ -1,8 +1,11 @@
 import leaf from "assets/icons/leaf.png";
 import sendMoney from "assets/icons/send-money.png";
+import Icon from "components/Icon";
+import Tooltip from "components/Tooltip";
 import { useModalContext } from "contexts/ModalContext";
 import { humanize } from "helpers";
 import { useAdminContext } from "pages/Admin/Context";
+import { useRef } from "react";
 import { IoArrowForwardOutline } from "react-icons/io5"; //icon-arrow-right
 import { RiPencilFill } from "react-icons/ri"; //icon-pencil
 import { useEndowmentQuery } from "services/aws/aws";
@@ -25,6 +28,8 @@ export function Schedule(props: Props) {
   const val = (pct?: number) =>
     pct || pct === 0 ? `$ ${humanize((pct / 100) * props.amount)}` : "---";
 
+  const grantRef = useRef<HTMLDivElement>(null);
+
   return (
     <div className="p-4 grid rounded border border-gray-l4 mt-4">
       <div className="flex flex-row items-center justify-between space-y-0">
@@ -54,7 +59,16 @@ export function Schedule(props: Props) {
       <div className="grid grid-cols-[auto_auto_auto_1fr] gap-y-2 gap-x-2">
         <div className="grid grid-cols-subgrid col-span-full items-center">
           <IoArrowForwardOutline className="h-4 w-4 mr-2" />
-          <span>Grants</span>
+          <div className="flex items-center">
+            <span>Grants</span>
+            <Tooltip
+              anchorRef={grantRef}
+              content="Donations received through Better Giving that will distributed to your bank account."
+            />
+            <div ref={grantRef}>
+              <Icon type="Question" size={14} className="text-navy-l1 ml-0.5" />
+            </div>
+          </div>
           <span className="ml-2 text-navy-l1 text-sm">
             {endow?.allocation?.cash ?? 0} %
           </span>