From c30f84d8d20bcc8aafb7a7491319e2e1d2e6f4a8 Mon Sep 17 00:00:00 2001
From: Rosanna Milner <44234896+rosannamilner@users.noreply.github.com>
Date: Tue, 11 Jun 2024 16:27:06 +0100
Subject: [PATCH] Fix bug with assistant help tooltip

Bug with assistant help tooltip not appearing and crashing when clicked
- changed from `HelpDialog` to `Tooltip` in `AssistantIntroduction.jsx`
---
 .../Assistant/AssistantIntroduction.jsx       | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/components/NavItems/Assistant/AssistantIntroduction.jsx b/src/components/NavItems/Assistant/AssistantIntroduction.jsx
index c371e5bed..38d8b2941 100644
--- a/src/components/NavItems/Assistant/AssistantIntroduction.jsx
+++ b/src/components/NavItems/Assistant/AssistantIntroduction.jsx
@@ -5,7 +5,8 @@ import { Box, CardHeader } from "@mui/material";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import Grid from "@mui/material/Grid";
-import HelpDialog from "../../Shared/HelpDialog/HelpDialog";
+import Tooltip from "@mui/material/Tooltip";
+import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined";
 import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
 import LinkIcon from "@mui/icons-material/Link";
 import Typography from "@mui/material/Typography";
@@ -89,20 +90,24 @@ const AssistantIntroduction = (props) => {
             </Typography>
           }
           action={
-            <div style={{ display: "flex", marginTop: 10 }}>
-              {
-                <HelpDialog
-                  title={"assistant_help_title"}
-                  paragraphs={[
-                    "assistant_help_1",
-                    "assistant_help_2",
-                    "assistant_help_3",
-                    "assistant_help_4",
-                  ]}
+            <Tooltip
+              interactive={"true"}
+              title={
+                <div
+                  className={"content"}
+                  dangerouslySetInnerHTML={{
+                    __html: keyword("assistant_help_title") + 
+                            keyword("assistant_help_1") +
+                            keyword("assistant_help_2") +
+                            keyword("assistant_help_3") +
+                            keyword( "assistant_help_4")
+                  }}
                 />
               }
-            </div>
-          }
+              classes={{ tooltip: classes.assistantTooltip }}
+            >
+              <HelpOutlineOutlinedIcon className={classes.toolTipIcon} />
+            </Tooltip>
         />
 
         <CardContent>