From 1b67e827890335ff17f9dfeced873fedc47cf44e Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Sat, 13 Jan 2024 01:01:11 -0600
Subject: [PATCH 1/2] more

---
 src/pageElements/Cards.js   |  8 +++++++-
 src/pageElements/Tooltip.js | 18 ++++++++++++++++++
 src/styles/tooltip.scss     | 24 ++++++++++++++++++++++++
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/pageElements/Tooltip.js
 create mode 100644 src/styles/tooltip.scss

diff --git a/src/pageElements/Cards.js b/src/pageElements/Cards.js
index 8cba675..8528689 100644
--- a/src/pageElements/Cards.js
+++ b/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>
         ) : (
diff --git a/src/pageElements/Tooltip.js b/src/pageElements/Tooltip.js
new file mode 100644
index 0000000..c1ae249
--- /dev/null
+++ b/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;
diff --git a/src/styles/tooltip.scss b/src/styles/tooltip.scss
new file mode 100644
index 0000000..cc785a7
--- /dev/null
+++ b/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;
+}

From f110979becab84b69ff61ebe3925bf231946299f Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Sat, 13 Jan 2024 01:47:29 -0600
Subject: [PATCH 2/2] more

---
 src/pageElements/Cards.js   |  2 +-
 src/pageElements/Tooltip.js | 16 +++++++++-------
 src/styles/tooltip.scss     | 22 +++++++++++++++++-----
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/pageElements/Cards.js b/src/pageElements/Cards.js
index 8528689..5d2aed8 100644
--- a/src/pageElements/Cards.js
+++ b/src/pageElements/Cards.js
@@ -280,7 +280,7 @@ export const DocCard = (props) => {
     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.";
+    "Parsing is taking longer than usual. Reasons may include unusually high traffic, or a corrupted conversion file. Don’t worry - in most cases, this will resolve in 10 minutes. If not, click the “report” button to notify support.  It will be fixed in 24 hours.";
   const disabled = docType ? false : true;
   return (
     <div className="doc-card-container">
diff --git a/src/pageElements/Tooltip.js b/src/pageElements/Tooltip.js
index c1ae249..ba6aa7c 100644
--- a/src/pageElements/Tooltip.js
+++ b/src/pageElements/Tooltip.js
@@ -1,16 +1,18 @@
+import { useState } from "react";
 import "../styles/tooltip.scss";
 import { InfoCircle } from "react-bootstrap-icons";
 
 function Tooltip(props) {
+  const [show, setShow] = useState(false);
   const { text } = props;
   return (
-    <div className="tooltip-container">
-      <InfoCircle
-        className="infocircle-icon"
-        size="16px"
-        style={{ color: "red" }}
-      />
-      <span className="tooltip-text">{text}</span>
+    <div
+      className="tooltip-container"
+      onMouseEnter={() => setShow(true)}
+      onMouseLeave={() => setShow(false)}
+    >
+      <InfoCircle className="infocircle-icon" size="16px" />
+      {show ? <span className="tooltip-text">{text}</span> : <></>}
     </div>
   );
 }
diff --git a/src/styles/tooltip.scss b/src/styles/tooltip.scss
index cc785a7..9f9b637 100644
--- a/src/styles/tooltip.scss
+++ b/src/styles/tooltip.scss
@@ -7,18 +7,30 @@
   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;
+.infocircle-icon {
+  color: red;
+}
+
+.tooltip-text {
+  position: absolute;
+  //top: 10;
+  //left: 50;
+  //right: 5;
+  width: 300px;
+  margin-right: 12px;
+  padding: 6px 6px;
+  font-size: 0.8rem;
+  background-color: var(--barely-there-accent);
+  border: 1px solid var(--gattlin-grey);
+  border-radius: 10px;
+  color: #000;
   opacity: 1;
   z-index: 9;
 }