Improve tooltip functionality and styling

Author: SableRaf

src/components/OpenWithButton.js

@@ -14,6 +14,17 @@ const OpenWithButton = ({ pdes }) => {
     }
     const [showInstructions, setShowInstructions] = useState(false)
 
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (showInstructions && !event.target.closest(`.${css.root}`)) {
+                setShowInstructions(false);
+            }
+        };
+
+        document.addEventListener('click', handleClickOutside);
+        return () => document.removeEventListener('click', handleClickOutside);
+    }, [showInstructions]);
+
     return (
         <a
             href={sketchURL}
@@ -24,9 +35,9 @@ const OpenWithButton = ({ pdes }) => {
             <ProcessingIcon /> {'Open With Processing'}
             {showInstructions && (
                 <div className={classnames(css.instructions)}>
-                    <p>If this did not open Processing, make sure you have it installed and opened at least once.</p>
-                    <p>Currently only versions of Processing later than 4.4 are supported</p>
-                    <a href="https://www.processing.org/download/" target="_black">Download Processing</a>
+                    <h1>Opening Processing<span className={css.ellipsis}></span></h1>
+                    <p>If nothing happens, <a href="https://www.processing.org/download/" target="_black" className={css.downloadLink}>Download Processing</a> version 4.4.1 or later and try again.</p>
+                    <p className={classnames(css.tooltipFootnote)}>Make sure Processing is installed and was opened at least once.</p>
                 </div>
             )}
         </a>

src/components/OpenWithButton.module.css

@@ -26,28 +26,66 @@
 
 .instructions {
   bottom: 100%;
-  margin-bottom: 10px;
-  left: 50%;
+  margin-bottom: 16px;
+  left: auto;
+  right: 0;
   position: absolute;
-  transform: translateX(-50%);
-  min-width: 16em;
+  transform: none;
+  min-width: 24em;
+  max-width: 24em;
+  width: fit-content;
   background-color: #555;
   color: #fff;
   text-align: left;
   border-radius: 6px;
-  padding: 8px 10px 10px 25px;
+  padding: 16px 10px 10px 25px;
   transition: opacity 0.3s;
+  pointer-events: auto;
   a {
     color: var(--processing-blue-mid);
   }
+  h1 {
+    color: #fff;
+    font-size: 2em;
+    margin: 0 0 0.3em 0;
+    font-weight: 500;
+  }
   &::before {
     content: "";
     position: absolute;
     top: 100%;
-    left: 50%;
+    left: auto;
+    right: 20px;
     margin-left: -10px;
     border-width: 10px;
     border-style: solid;
     border-color: #555 transparent transparent transparent;
   }
 }
+
+.tooltipFootnote {
+  color: var(--gray);
+  font-size: 0.9em;
+}
+
+.downloadLink {
+  color: var(--processing-blue-light) !important;
+  text-decoration: underline;
+}
+
+.downloadLink:hover {
+  color: white !important;
+}
+
+@keyframes ellipsis {
+    10%  { content: "    "; }
+    25%  { content: " .  "; }
+    50% { content: " .. "; }
+    75% { content: " ..."; }
+}
+
+.ellipsis::after {
+    display: inline-block;
+    animation: ellipsis 1.5s infinite;
+    content: " ...";
+}