Merge pull request #1230 from hackforla/1223-discoverability-tooltips

1223 discoverability tooltips

client/src/components/ProjectWizard/WizardPages/DiscoverTooltips.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { createUseStyles } from "react-jss";
+
+const useStyles = createUseStyles({
+  container: {
+    width: "250px",
+    background: "#e9e9f1",
+    padding: "1em",
+    paddingBottom: "0",
+    position: "absolute",
+    left: "23.5px",
+    textAlign: "initial"
+  },
+  title: {
+    flexGrow: "1",
+    flexBasis: "50%",
+    flexShrink: "1",
+    fontFamily: "Calibri Bold"
+  }
+});
+
+const DiscoverTooltips = () => {
+  const classes = useStyles();
+  return (
+    <div className={classes.container}>
+      <p className={classes.title}>
+        Try hovering over a term you want more information on. If the words
+        become underlined and bold, you can click for a description. Hovering
+        over a green question mark will also provide more information.
+      </p>
+    </div>
+  );
+};
+
+export default DiscoverTooltips;

client/src/components/ProjectWizard/WizardPages/ProjectDescriptions.js

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import RuleInputPanels from "../RuleInput/RuleInputPanels";
+import DiscoverTooltips from "./DiscoverTooltips";
 
 function ProjectDescriptions(props) {
   const { rules, onInputChange, onAINInputError } = props;
@@ -23,6 +24,7 @@ function ProjectDescriptions(props) {
         />
       </form>
       <div className="tdm-wizard-page-disclaimer">
+        <DiscoverTooltips />
         <span className="tdm-wizard-page-disclaimer-asterisk">*</span>{" "}
         designates required fields
       </div>

client/src/components/ToolTip/ToolTipLabel.js

@@ -15,7 +15,8 @@ const useStyles = createUseStyles({
     flexBasis: "50%",
     "&:hover": {
       fontWeight: "bold",
-      textDecoration: "underline"
+      textDecoration: "underline",
+      cursor: "pointer"
     }
   },
   tooltip: {