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] 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;
+}