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