From cd8557dd23c191bb33249557fb5bfb9639cbd191 Mon Sep 17 00:00:00 2001
From: Ryan Lynch <lynchryan2@gmail.com>
Date: Tue, 16 Jul 2024 11:56:36 +0100
Subject: [PATCH] Adding tooltip for max loan

---
 src/components/MaxLoanInput/MaxLoanInput.tsx | 26 ++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/MaxLoanInput/MaxLoanInput.tsx b/src/components/MaxLoanInput/MaxLoanInput.tsx
index 3c5c93e..b529f59 100644
--- a/src/components/MaxLoanInput/MaxLoanInput.tsx
+++ b/src/components/MaxLoanInput/MaxLoanInput.tsx
@@ -1,4 +1,9 @@
-import { ITextFieldStyles, TextField } from "@fluentui/react";
+import {
+    ITextFieldStyles,
+    Icon,
+    TextField,
+    TooltipHost,
+} from "@fluentui/react";
 
 export interface MaxLoanInputProps {
     maxLoan: number;
@@ -17,7 +22,24 @@ export const MaxLoanInput: React.FC<MaxLoanInputProps> = (
     return (
         <TextField
             type="number"
-            label="Max Loan"
+            onRenderLabel={() => {
+                return (
+                    <div>
+                        Max Loan{" "}
+                        <TooltipHost
+                            className="tooltip"
+                            content="If you have your mortgage approval, you can put the max loan amount here. 
+                            Note: This is not the house value, it is the house value minus your deposit."
+                            id="maxLoanTooltip"
+                        >
+                            <Icon
+                                iconName="Info"
+                                style={{ fontSize: "0.7778rem" }}
+                            />
+                        </TooltipHost>
+                    </div>
+                );
+            }}
             styles={defaultTextFieldStyles}
             value={maxLoan.toString()}
             onChange={(_e, newValue) => {