diff --git a/src/pageElements/Cards.js b/src/pageElements/Cards.js
index 8cba675..5d2aed8 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 =
+ "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 (
@@ -284,7 +288,9 @@ export const DocCard = (props) => {
-
{title}
+
+ {title} {disabled ? : <>>}
+
{dateServed ? (
Served: {dateServed}
) : (
diff --git a/src/pageElements/Tooltip.js b/src/pageElements/Tooltip.js
new file mode 100644
index 0000000..ba6aa7c
--- /dev/null
+++ b/src/pageElements/Tooltip.js
@@ -0,0 +1,20 @@
+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 (
+
setShow(true)}
+ onMouseLeave={() => setShow(false)}
+ >
+
+ {show ? {text} : <>>}
+
+ );
+}
+
+export default Tooltip;
diff --git a/src/styles/tooltip.scss b/src/styles/tooltip.scss
new file mode 100644
index 0000000..9f9b637
--- /dev/null
+++ b/src/styles/tooltip.scss
@@ -0,0 +1,36 @@
+.tooltip-container {
+ display: inline;
+ justify-content: center;
+ align-items: center;
+ margin: auto;
+ height: 30px;
+ width: 30px;
+ margin: 0px 6px;
+ padding: 0px 2px;
+}
+
+.tooltip-text {
+ font-size: 12px;
+ opacity: 0;
+}
+
+.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;
+}