tooltips for InputRow done

dashboard/src/components/values-form/InputRow.tsx

@@ -1,4 +1,5 @@
 import React, { ChangeEvent, Component } from "react";
+import Tooltip from "@material-ui/core/Tooltip";
 import styled from "styled-components";
 
 type PropsType = {
@@ -39,7 +40,27 @@ export default class InputRow extends Component<PropsType, StateType> {
         {(label || info) && (
           <Label>
             {label}
-            {info && " ?"}
+            {info && (
+              <Tooltip
+                title={
+                  <div
+                    style={{
+                      fontFamily: "Work Sans, sans-serif",
+                      fontSize: "12px",
+                      fontWeight: "normal",
+                      padding: "5px 6px",
+                    }}
+                  >
+                    {info}
+                  </div>
+                }
+                placement="top"
+              >
+                <StyledInfoTooltip>
+                  <i className="material-icons">help_outline</i>
+                </StyledInfoTooltip>
+              </Tooltip>
+            )}
             {this.props.isRequired && <Required>{" *"}</Required>}
           </Label>
         )}
@@ -109,3 +130,21 @@ const StyledInputRow = styled.div`
   margin-bottom: 15px;
   margin-top: 22px;
 `;
+
+const StyledInfoTooltip = styled.div`
+  display: inline-block;
+  position: relative;
+  margin-right: 2px;
+  > i {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: -10px;
+    font-size: 10px;
+    color: #858faaaa;
+    cursor: pointer;
+    :hover {
+      color: #aaaabb;
+    }
+  }
+`;