more

src/pageElements/Cards.js

@@ -2,6 +2,8 @@ import React from "react";
 import Button from "../pageElements/Button.js";
 import { FileEarmarkText } from "react-bootstrap-icons";
 import TextInput from "../pageElements/TextInput";
+import Tooltip from "../pageElements/Tooltip";
+import { InfoCircle } from "react-bootstrap-icons";
 
 export const InfoCard = (props) => {
   const { data, onEdit, onCancel, onSave, onChangeInput, isEditing, isBusy } =
@@ -277,6 +279,8 @@ export const DocCard = (props) => {
     responseGenerations,
     confirmDelete,
   } = props;
+  const tooltipText =
+    "The documet is taking longer htan usual to parse.  There may be a number of reasons: unusually high traffic, a bad or corrupted conversion file, or others. Do not worry! Check back in 15 minutes. In most cases, it will be resolved.  If it is not, click the 'report buton to notify support.";
   const disabled = docType ? false : true;
   return (
     <div className="doc-card-container">
@@ -284,7 +288,9 @@ export const DocCard = (props) => {
         <div className="card-col-icon">
           <FileEarmarkText className="doc-file-icon" size="22px" />
         </div>
-        <div className="doc-col2">{title}</div>
+        <div className="doc-col2">
+          {title} {disabled ? <Tooltip text={tooltipText} /> : <></>}
+        </div>
         {dateServed ? (
           <div className="doc-col3">Served: {dateServed}</div>
         ) : (

src/pageElements/Tooltip.js

@@ -0,0 +1,18 @@
+import "../styles/tooltip.scss";
+import { InfoCircle } from "react-bootstrap-icons";
+
+function Tooltip(props) {
+  const { text } = props;
+  return (
+    <div className="tooltip-container">
+      <InfoCircle
+        className="infocircle-icon"
+        size="16px"
+        style={{ color: "red" }}
+      />
+      <span className="tooltip-text">{text}</span>
+    </div>
+  );
+}
+
+export default Tooltip;

src/styles/tooltip.scss

@@ -0,0 +1,24 @@
+.tooltip-container {
+  display: inline;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  height: 30px;
+  width: 30px;
+  margin: 0px 6px;
+  padding: 0px 2px;
+  background-color: yellow;
+}
+
+.tooltip-text {
+  font-size: 12px;
+  visibility: hidden;
+  opacity: 0;
+}
+
+.tooltip-container:hover .tooltip-text:hover {
+  font-size: 12px;
+  visibility: visible;
+  opacity: 1;
+  z-index: 9;
+}